I succeeded in getting a video to open in fullscreen mode in response to events (click, keypress) using the HTML 5 video tag and jQuery. How do I get the video to open in fullscreen on page load instead of onclick? Any help would be appreciated. Many thanks!

My HTML:

    <div id="video_container>
       <video id="video1" width="1280" height="720" controls autoplay>
          <source src="videos/ballet.mp4" type="video/mp4">
          <source src="videos/ballet.webm" type="video/webm">
          <source src="videos/ballet.ogv" type="video/ogg">
       </video>
    </div>

My JavaScript:

$(document).ready(function(){     
      $('#video1').bind("playing", function(){

        var elem = document.getElementById("video1");
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen();
        }
      });

      $('#video1').bind("ended", function(){ 
        $("#video_container").hide();
      });
 });

I succeeded in getting a video to open in fullscreen mode in response to events (click, keypress) using the HTML 5 video tag and jQuery. How do I get the video to open in fullscreen on page load instead of onclick? Any help would be appreciated. Many thanks!

My HTML:

    <div id="video_container>
       <video id="video1" width="1280" height="720" controls autoplay>
          <source src="videos/ballet.mp4" type="video/mp4">
          <source src="videos/ballet.webm" type="video/webm">
          <source src="videos/ballet.ogv" type="video/ogg">
       </video>
    </div>

My JavaScript:

$(document).ready(function(){     
      $('#video1').bind("playing", function(){

        var elem = document.getElementById("video1");
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen();
        }
      });

      $('#video1').bind("ended", function(){ 
        $("#video_container").hide();
      });
 });

• javascript
• jquery
• html
• video
• html5-video

• css-tricks./custom-controls-in-html5-video-full-screen – Just code Commented Nov 28, 2013 at 3:52

1 Answer 1

Sounds like you can't make the video fullscreen on page load, at least not for webkit browsers. According to the Safari Developer Library:

The webkitEnterFullscreen() method can be invoked only in response to a user action, such as clicking a button. You cannot invoke webkitEnterFullscreen() in response to a load event, for example.

Full article here: https://developer.apple./library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html