Request Full Screen HTML5 Video onPlay

Question

I\'m using the following code to trigger fullscreen when a user clicks on the play button on a element:

var video = $(\"#video\");         


        

Answer 1

There are a couple things going on here:

First, in your code, video is a jQuery object, not the actual video element. For a jQuery object, you can reference it like this:

var actualVideo = video[0]; // (assuming '#video' actually exists)

Second, for security and good user experience, browsers will only let you trigger full screen inside a user-triggered event, like a 'click'. You can't have every web page going to full screen as soon as you visit it, and you can cause a video to start playing automatically, which would violate that rule.

So an alternative solution would be to request fullscreen in a click event, like this:

var video = $("#video");
video.on('click', function(e){
    var vid = video[0];
    vid.play();
    if (vid.requestFullscreen) {
      vid.requestFullscreen();
    } else if (vid.mozRequestFullScreen) {
      vid.mozRequestFullScreen();
    } else if (vid.webkitRequestFullscreen) {
      vid.webkitRequestFullscreen();
    }
});

Ideally, you'd probably want to build out a more complete player ui, but this should give you the general idea.