Having trouble with the full-screen feature not functioning properly?

I am currently in the process of creating a custom video player and I need to include a full-screen button. However, when I click on it, the video does not expand to fill up the entire screen. I am using javascript, css3, and html5 for this project. Any assistance or guidance would be greatly appreciated. Thank you.

Here is how everything is currently set up:

divider: video, range, div, enddiv, endiv

I want the first divider to go fullscreen along with all its contents. Please review my code below:

// JavaScript code snippet here...

/ * CSS code snippet here... */

<HTML code snippet here...>

javascripthtmlcss

Answer №1

Your CSS includes a video.fullscreen class, but it doesn't seem to be assigned in your JavaScript code. You need to use class.add / class.remove within the fullscreen-function to address this.

Below is an example demonstrating the proper implementation of capturing the ESC button press and more.

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      /* Your CSS styles here */
    </style>
  </head>
  <script>
    // Your JavaScript code here
  </script>
  <body>
    <div id="warning">
      <p id="chromewarningtext">For best functionality, please use Google Chrome as your browser.<a id="chromelink" href="https://www.google.com/intl/en/chrome/browser/">Download Google Chrome now.</a></p><button id="cross">x</button>
    </div>
    <div id="videoplayer">
      <video id="video" preload autoplay>
        <source src="testvid.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
      </video>
      <div id="controlbar">
        <input id="seekslider" type="range" min="0" max="700" value="0" step="1">
        <div id="videocontroller">
          <button id="playpausebtn"></button>
          <button id="mutebtn"></button>
          <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
          <button id="fullscreenbtn" title="fullscreen"></button>
        </div>
      </div>
    </div>
  </body>
</html>

Answer №2

Consider utilizing 100vh for setting the height and 100vw for specifying the width rather than relying on100%

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Since switching to PHP 5.5 from version 3.x, I have noticed that it is attempting to interpret my JavaScript comment within a script tag in a PHP include file

After a long break from working with PHP, I recently encountered an issue with an older website I built using PHP and the include function. The site was functioning perfectly until the web host updated PHP to version 5.5, causing a strange bug where it see ...

javascriptphp

How can I set up an additional "alert" for each form when making an AJAX request?

let retrieveLoginPasswords = function (retrieveForgottenPasswords, checkLoginStatus) { $(document).ready(function () { $('#login,#lostpasswordform,#register').submit(function (e) { e.preventDefault(); $.ajax({ type: &quo ...

javascriptphpjqueryajax

Encountering issues while trying to install Java using NPM

Encountering errors when attempting to run the following command to install java dependencies for NPM. NPM install -g java In need of assistance to fix this error. C:\WINDOWS\system32>npm i -g java [email protected] install C:\D ...

javascriptjavanode.jsnpmnpm-install

How to assign a preset value to a text area in AngularJS

While working with PHP and AngularJS, I have a requirement to specify the default value for a textarea. I prefer not to utilize ng-init="textarea = ''" as the data to populate is extensive. Similarly, I want to avoid using AJAX to prevent additi ...

javascriptphpjqueryangularjs

Prop in a React component is undergoing mutation

I encountered a strange situation where a prop in a React component is being changed. Although it's technically not a mutation since it's an array in JavaScript, it should not be modified. To replicate the issue, I created a simple example: htt ...

javascriptreactjs

Separate each element with a time gap when using the .each() function in

Below is the code snippet that I have: $('.action-button').each(function(i, obj) { $(obj).trigger('click') }); I am looking to introduce a delay between each iteration of the loop, ideally a 5-second delay. Is it achievable through se ...

javascriptjquery

How does setting $.support.cors = true; affect the performance of ajax calls on browsers that do not support Cross-Origin Resource Sharing (

Hey everyone, I've encountered a situation where I need to make cross-domain AJAX requests, so I included the line "$.support.cors = true;" before my ajax calls. However, I'm noticing that for non-cross domain calls, my ajax requests don't ...

javascriptjqueryajaxcross-domain

Transferring an array from PHP to jQuery through the use of AJAX

My JavaScript code communicates with a PHP page to retrieve data from a database and store it in an array. Now, I would like to use jQuery to loop through that array. This is how the array is structured: Array ( [0] => Array ( [image] => articl ...

phpjavascriptjqueryajaxarrays

Failure to correctly apply CSS to Angular custom components causes styling issues

I have been working with a custom component and I have incorporated several instances of it within the parent markup. When I apply styles directly within the custom component, everything works as intended. However, when I try to set styles in the parent co ...

htmlcssangularasp.net-core-2.2

What is the process for obtaining a value when you click and then retrieving the associated ID?

I am looking to create a function that, when clicking on the square with the ID "colors", will return the sentence containing the colors from the table in PHP files with the ID "retours_couleurs". Apologies for any mistakes in my English, as I am French. ...

javascriptphpajaxxmlhttprequest

The impact of adjusting the article's margin-top on the margin-top of

I want these two divs to have different positioning. The sidebar should remain fixed at the top. Why is the sidebar aligned with the article div instead of sticking to the top? body{ margin: 0; padding: 0; } div#sidebar{ background-color: yel ...

htmlcss

Tips for preventing a bootstrap modal from being dragged beyond its parent container

I need help figuring out how to prevent my bootstrap modal from being dragged outside of its parent container. Is there a way to constrain the modal within its parent? $(document).ready(function() { ShowValidationResult(); }); function ShowValidation ...

htmljquerycsstwitter-bootstrap

What are the best practices for utilizing pre-defined CSS classes in Vue.js libraries?

I don't have much experience with CSS, but I'm really eager to customize the appearance of my chart. The chart is generated by a vue.js library and comes with pre-defined CSS classes. However, I'm uncertain about how to access and modify the ...

cssvue.jscharts

Create a Jest unit test for a specific function

I started my first unit test in react with jest this afternoon. The initial 5 tests I need to do involve testing the return functions, which isn't too difficult. However, I'm struggling to understand how to perform unit testing on my login funct ...

javascriptreactjsunit-testingjestjs

Tips on using constructor functions and the new keyword in Typescript

This is a demonstration taken from the MDN documentation showcasing the usage of the new keyword function Car(make, model, year) { this.make = make; this.model = model; this.year = year; } const car1 = new Car('Eagle', 'Talon TSi&apos ...

javascripttypescriptnew-operator

What is the process for dynamically inserting a new object into an array of data objects in Vue.js?

I am a beginner with vue.js and currently working on a form. I have an add button in my form, so when the user clicks on it, the same form field will be added to the form. Users can add as many times as they want. Here is my initial data: data () { ret ...

javascriptvue.jsvuejs2

Enhancing your website's design with dynamic CSS variables using JavaScript

Is there a way to update CSS variables specifically scoped under a certain CSS class (or even other complex CSS selectors) that are predefined in a stylesheet? This question extends beyond just CSS variables and includes other CSS properties as well, quest ...

javascripthtmlcssdomcss-variables

Stopping unauthorized users from manipulating REST URLs

I am currently exploring methods to prevent an exploit where a user manipulates the URL, specifically in a GET request scenario. The following code represents a route on my Express router that processes incoming requests for a certain collection "A" and re ...

javascriptrestexpressroutesjavascript-injection

How can I import an excel spreadsheet using Javascript, or alternatively, convert an excel file to a text document

I have been updating my file upload page to handle both text and excel files. However, when trying to read excel files with my current code, I am getting strange output. It seems that my function, which was originally designed for text files, needs modific ...

javascriptjqueryexcelfile-upload

MUI full screen dialog with material-table

Issue: When I click a button on my material-table, it opens a full-screen dialog. However, after closing the dialog, I am unable to interact with any other elements on the screen. The dialog's wrapper container seems to be blocking the entire screen. ...

javascriptreactjsmaterial-ui