When in fullscreen mode, HTML controls are automatically displayed

I embedded a video in my HTML code

    <video width="100%" class="posted_vid">
            <source src="uploaded_videos/<?php echo $Video; ?>">
    </video>                                

        <div class="video_controls">                        
                    <input type="range" id="font-1-size" value="0" class="video_range"  min="0"><br>
                    <img src="img/playicon.png" class="play_button">
                    <img src="img/pauseicon.png" class="pause_button">
                    <img src="img/volumeicon.png" class="volume_button">
                    <input type="range" min="0" max="1" step="0.1" class="volume">
                    <span class="cur_time current_min">0:</span><span class="cur_time current_seconds">00</span>
                    <span class="duration">0:00</span>  
                   <img title="Fullscreen" src="img/fullscreen.png" class="fullscreen_vid">
       </div>

$("body").on('click', '.fullscreen_vid', function(event) {
    var vid = $(this).parent().siblings('.posted_vid')[0];
    if (vid.requestFullscreen) {
      vid.requestFullscreen();
    } else if (vid.mozRequestFullScreen) {
      vid.mozRequestFullScreen();
    } else if (vid.webkitRequestFullscreen) {
      vid.webkitRequestFullscreen();
    }   
});

When the video goes fullscreen, my custom controllers are hidden and default HTML controllers appear. How can I prevent this from happening?

jqueryhtmlcss

Answer №1

Make sure to set the DOM node that contains both the video and custom controls to fullscreen, instead of just the video itself.

<div id="container">
  <video width="100%" class="posted_vid">
    <source src="uploaded_videos/<?php echo $Video; ?>">
  </video>
  <div class="video_controls">
    <input type="range" id="font-1-size" value="0" class="video_range" min="0"><br>
    <img src="img/playicon.png" class="play_button">
    <img src="img/pauseicon.png" class="pause_button">
    <img src="img/volumeicon.png" class="volume_button">
    <input type="range" min="0" max="1" step="0.1" class="volume">
    <span class="cur_time current_min">0:</span><span class="cur_time current_seconds">00</span>
    <span class="duration">0:00</span>
    <img title="Fullscreen" src="img/fullscreen.png" class="fullscreen_vid">
  </div>
</div>

 

$("body").on('click', '.fullscreen_vid', function(event) {
  var vid = $('#container');  // <------ this 
  if (vid.requestFullscreen) {
    vid.requestFullscreen();
  } else if (vid.mozRequestFullScreen) {
    vid.mozRequestFullScreen();
  } else if (vid.webkitRequestFullscreen) {
    vid.webkitRequestFullscreen();
  }
});

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

When using Jquery, hovering over an element will cause the full title to be

I have created a toggle div that displays an ellipsis (...) when the long title is longer than 30 characters. Now, I want the full text of the long title to appear when hovering over the div. Check out this JS Fiddle for reference. JS $('#popu ...

javascriptjquery

Navigating through unidentified json keys using jquery

I've encountered an issue with a JSON object where the key can change, making it difficult to access data using specific key names. My goal is to display this data in a table format. For example, I may receive data like this: [{"domain":"animals","c ...

jqueryjson

What is the method for changing the background color of a search container within a blue top bar?

I'm having trouble styling the search field in the topbar of my website. The topbar and icons have a blue background (#6495ed) with white icons, but the search container remains white. How can I make it blue? I have tried setting the background to #6 ...

htmlcss

Scrolling feature is not effective in lower resolutions

At resolutions lower than 1024x768, the browser scroll is not functioning correctly. If you look closely, you will see that when the resolution is smaller, the purple stripe is not fully visible. I also observed that the body is positioned at the top, whi ...

htmlcssscroll

What is the best way to download and execute a Javascript script in real-time using the Javascript console?

Is there a quick JavaScript console command to download and run a script from a remote source? I am interested in finding an efficient method to obtain this specific script for interactive experimentation on various pages that may not have jQuery loaded. ...

javascriptjquerydebugging

The HTML code is failing to apply the style to all rows except for the first one in the sql query result

When retrieving all the rows from a SQL database with a query and using a loop to iterate through them, I encountered an issue where only the first row was receiving the specified CSS style. The remaining rows were not applying the style as expected. < ...

phphtmlcss

Guide on utilizing the jQuery DataTables API within Chrome Developer Tools

I am attempting to understand the functionality of the DataTables API by experimenting with simple calls in the Chrome Dev Tools to see instant results. Consider a basic table with columns labeled Foo and Bar: --------- |Foo|Bar| --------- |1 |a | ----- ...

javascriptjquerydatatablesgoogle-chrome-devtools

A guide on integrating mat-select into Angular input fields

I've been trying to implement a mat-select dropdown on my input field, but for some reason, when I click on the arrow, nothing happens and the list doesn't show up. Usually, with autocomplete, when a user starts typing, all the options are displ ...

htmlcssangularangular-materialhtml-select

Customizable page layout with fixed width that adjusts based on content

I am looking to enhance the design of my website by updating its template. I want the content to be displayed within a fixed width centered div. While there are plenty of examples on the web for this, I want to ensure that existing text and tables in my ...

csshtml

Display web content using ASP.NET Razor cshtml files

I am currently working on a web application developed with ASP.NET 4.6.1 and utilizing the Razor view engine. Is there a way to trigger a command that will convert all my template files (.cshtml files) into static HTML? For specific stages in my build pro ...

c#htmlasp.netasp.net-mvcrazor

Is there a way to deactivate other dropdown options?

To simplify the selection process, I would like to disable the options for "Province", "City", and "Barangay". When the user clicks on the "Region" field, the corresponding "Province" options should be enabled. Then, when a specific province is selected, t ...

javascriptphphtml

"Experience the magic of jQuery Ajax as divs gracefully slide into view

I'm facing an issue with a dropdown menu on my page that shows all users. When a user selects someone from the dropdown, I trigger an ajax call to retrieve that user's information. Everything seems to be functioning correctly. Now, I want to pres ...

jqueryajaxslidedown

How can JQuery's .load() method be best utilized when working with an image?

I am currently utilizing the .load() function to fetch an image from the server once a button on my webpage is clicked. I then wrap the image in "a href" and "img" tags to convert it into a clickable link, and finally attach it to a div. Here is the code ...

javascriptjquery

concealing a section of a div using the jQuery sortable feature

My code structure is quite similar to the example below, and I am attempting to conceal the TR elements with the class "some_row". <div id="sortable"> <table> <tr><td>Some Title 1</td></tr> <tr class="some_ro ...

javascriptjqueryjquery-uijquery-ui-sortable

Utilizing JQgrid's onPaging function to dynamically update URL parameters for Ajax requests, making use of the already-existing onPaging

Hello everyone, Within JQGrid, I am looking to update the 'Page' parameters such as startpg or endpg in the URL through an AJAX call in order to fetch the next set of records and page. For example: - URL url:'Data.jsp?sord=asc&page=1&star ...

jqueryjqgrid

What is the best way to choose an element within an iframe?

My page contains a wysiwig editor plugin, and I am in need of extracting data from iframe > html > body.class. I want to monitor keyup events in that element. How can this issue be tackled without having the capability to add jquery to the plugin? ...

jquery

Differentiate the iframe goal

As someone who is brand new to JavaScript, I am stepping out of my comfort zone and trying something unfamiliar in order to learn. Currently, I am coding an HTML website and have incorporated an iframe element. My goal is to display different HTMLs within ...

javascriptjqueryhtmliframe

How can I retrieve and manipulate the text within an option tag of a form using JavaScript?

<select name="products"> <option value=""> - Choose - </option> <option value="01">table</option> <option value="02">chair</option> <option value="03">book</option> <option value= ...

javascripthtmlforms

Using Python and Selenium to interact with HTML tags within a table

Here is a table structure that I am working with:- <table> <tbody> <tr class="stripe"> <td colspan="3"/> </tr> <tr> <td style="width: 160px;">Field1:</td> <td style="wi ...

pythonhtmlselenium

The steps to properly load "child.vue" into the correct position within "parent.vue" are as follows

Currently I am developing a single page web application using Vue.js. This app consists of 4 "page.vue" files, each with a right and left child .vue component nested inside. For instance, the Page1.vue file is structured as follows (omitting style and scr ...

javascripthtmlcssvue.js