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

A less verbose way to toggle full screen combining answers from this and other questions.

This should handle all browser flavours: chromium- and webkit-based, firefox, opera, and MS-based browsers.

var p = document.querySelector('#videoplayer');

if (!window.isFs) {
    window.isFs = true;
    var fn_enter = p.requestFullscreen || p.webkitRequestFullscreen || p.mozRequestFullScreen || p.oRequestFullscreen || p.msRequestFullscreen;
    fn_enter.call(p);
} else {
    window.isFs = false;
    var fn_exit = p.exitFullScreen || p.webkitExitFullScreen || p.mozExitFullScreen || p.oExitFullScreen || p.msExitFullScreen;
    fn_exit.call(p);
}

p represents the DOM object of the video element, and window.isFs is just a random variable for storing the current fullscreen state.

If your player is a jQuery object then you can get the underlying DOM-element with var p = player.get(0).