Make a div in full screen mode in javascript

Question

I need to make a div in full screen mode.
In this div I have a video and the custom controls.
so I want when user click FS video and custom controls goes into full screen mode.
Here is code which I use.

<div id="custom-video">
    <video id="video" src="path/to/src"></video>
    <button onclick="fsMode()">FS</button>
</div>

Here is javascript code.

function fsMode(){
    var i = $('#custom-video');
    if (i.requestFullscreen) {
        console.log('1');   
        i.requestFullscreen();
    } else if (i.webkitRequestFullscreen) {
        console.log('2');
        i.webkitRequestFullscreen();
    } else if (i.mozRequestFullScreen) {
        console.log('3');
        i.mozRequestFullScreen();
    } else if (i.msRequestFullscreen) {
        console.log('4');
        i.msRequestFullscreen();
    }else{
        console.log('Not available');
    }
}

When I try this code output is Not available .
But I try same code in that way and its work, it mean browser support fullscreenMode , but why this is not for above code.

// this code is working but I don't want to use it because 
// custom controls will not show in fullscreen mode 
var video = $('#video').get(0);
if (video.requestFullscreen) {
    video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
    video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen(); // Chrome and Safari
}

Any suggestion ?
Thanks...

Answer 1

Seems like you are testing the fullscreen on the div containing the video and not the video itself. Try var i = $('#video').get(0); like in the second example and see it it works.

Answer 2

what is returned by jQuery selectors like $("#video-id") and what is returned by document.getElementById("video-id") are not same. In most cases, you can use $("#video-id")[0] or $("#video-id").get(0) to get the javascript equivalent, which is what we need in this case. That's why your code is not working.