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

Vue Page fails to scroll down upon loading

I am facing a challenge with getting the page to automatically scroll down to the latest message upon loading. The function works perfectly when a new message is sent, as it scrolls down to the latest message instantly after sending. I've experimented ...

javascripthtmlfirebasevue.jsdom

Filtering Array Elements in Vue JS: A Step-by-Step Guide

In my Vue Js 2.0 application, I am working on filtering elements in an array format. Here is the code snippet: const search = this.search_by_name.toLowerCase() const searchContact = this.search_by_contact.toLowerCase() return this.meetings .map(i => ...

javascriptvue.jsvuejs2

When the class name is identical, the click event appears to be malfunctioning

Why isn't the click event working in this code? What am I doing wrong? $(document).ready(function() { $('.dashboardList').click(function() { alert("hello"); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1. ...

javascriptjqueryhtmlcss

Link a YAML file with interfaces in JavaScript

I'm currently learning JavaScript and need to convert a YAML file to an Interface in JavaScript. Here is an example of the YAML file: - provider_name: SEA-AD consortiumn_name: SEA-AD defaults: thumbnail Donors: - id: "https://portal.brain ...

javascriptnode.jstypescriptyaml

What is the best way to repair a react filter?

Recently, I successfully created a database in Firebase and managed to fetch it in React. However, my current challenge is to integrate a search bar for filtering elements. The issue arises when I search for an element - everything functions as expected. ...

javascriptreactjsfirebasegoogle-cloud-firestore

PHP bug causing inaccuracies in output results

I've written a PHP script to determine a student's final grade, taking into account weight and target grades. However, the output value it generates is incorrect. Below is my current PHP code: <?php $numassignments = isset($_GET['numass ...

phphtmlmysql

Utilize jQuery in phantom.js to send an ajax request across domains

I am currently in the process of testing a chrome plugin by emulating a portion of its functionality on phantomjs. My objective for phantom seems quite straightforward, yet I am encountering issues. I aim for it to navigate to a specific webpage and withi ...

javascriptphantomjs

Why did my compilation process fail to include the style files despite compiling all other files successfully?

As English is not my first language, I kindly ask for your understanding with any typing mistakes. I have created a workspace with the image depicted here; Afterwards, I executed "tsc -p ." to compile my files; You can view the generated files here Unf ...

javascriptcssreactjstypescriptless

Calculating the sum of values in a JSON array using a specific parameter in Typescript

A flat JSON array contains repetitive identifier, categoryId, and category: data: [ { "identifier": "data", "categoryId": "1", "category": "Baked goods", "product": "Aunt Hattie's", "price": "375" } ...

javascriptarraysjsontypescript

Retrieve the content within a div tag

Hey there, I have a div set up as follows: <div>1+1</div> I'm looking to send this '1+1' value over to my javascript code and calculate it to get '2'. Appreciate any help in advance! ...

javascript

How to work with a JSON object in Internet Explorer 6

Looking for some quick answers that should be easy for someone with expertise to provide. I have a basic asp.net site that relies on JSON for various tasks (and JSON.stringify). Everything works fine in Firefox and the like, but in IE6 I'm getting a ...

javascriptjsoninternet-explorer

What is the process for modifying a Gist on GitHub?

Trying to update my Gist from another website using my gist token has been unsuccessful. Retrieving a gist with GET was successful, but updating it with PATCH is not working. I don't believe authentication is the issue since retrieving the gist displ ...

javascriptjsonajaxxmlhttprequestgist

Prestashop 1.7 - Enhanced top menu navigation with drop-down subcategories

While using the ps_mainmenu top menu with the default Prestashop theme, I noticed that the drop-down menu only works for parent categories and not subcategories. You can see this in the attached image and HTML code from Chrome. I'm looking for a way t ...

phphtmlcssbootstrap-4prestashop

Omitting an element from the CSS styling

How can I create a CSS selector that targets the text content within this snippet, excluding the <label> component? Essentially, I want to style the text in the div while leaving the label unchanged. <div id="edit-cc" class="form-item form-type ...

htmlcss

The mouse pointer adjusts according to the event

I am working on an ajax request and I have implemented a feature where the cursor changes appearance. document.body.style.cursor = "wait"; This immediately shows the cursor as a spinning circle when the request starts. At the end of the request, I ch ...

javascriptjquerycssajax

Fetching Information From Database Using PHP

I am encountering an issue while attempting to transfer data from my HTML table to my modal (without using bootstrap). In the image below, you can see that I have successfully displayed data from MySQL database in the table. The problem arises when I clic ...

javascriptphpjqueryhtmlmysql

What could be the reason behind the disruption in this JavaScript associative array?

I'm facing an issue with my associative array, which I have confirmed through console.log to be initially: this.RegionsChecked = {"US":true,"APAC":true,"Canada":true,"France":true,"Germany":true,"India":true,"Japan":true,"LATAM":true,"MEA":true,"UK": ...

javascriptarraysdom

Identify the moment all Dropzones are added to a form

I am working on a page where multiple dropzones are set up for individual images. Once the user submits the form, all the images attached to the dropzones are resized and then added to the rest of the form fields. After resizing and appending the images, ...

javascriptdropzone.js

Arrange the items in the last row of the flex layout with equal spacing between them

How can I arrange items in rows with equal space between them, without a large gap in the last row? <div fxFlex="row wrap" fxLayoutAlign="space-around"> <my-item *ngFor="let item of items"></my-item> </div> Current Issue: htt ...

htmlangularcssflexbox

The styles order definition in the Material-UI production build may vary from that in development

When using material-ui, an issue arises in the production build where the generated styles differ from those in development. The order of the material-ui styles in production does not match the order in development. In DEV, the material-ui styles are defi ...

javascriptreactjsmaterial-uiparceljs