making html5 video to fullscreen

Question

I have a custome HTML5 Video player, where in the HTML Page there is a video tag and another DIV tag where i have put the controls. The Control DIV has play button,Pause button, Fullscreen button etc. Now i am trying to make the video full screen on the click of the full screen button. I have written the code making the use of requestFullscreen(). This code is not throwing any error but its neither working. Could someone please tell me where i am going wrong??

var controls = {
video: $("#player"),  //this is the video element
fullscreen: $("#fullscreen")  //This is the fullscreen button.
};

controls.fullscreen.click(function(){
var elem = controls.fullscreen;
if (elem.requestFullscreen) {
    controls.video.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
    controls.video.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
    controls.video.webkitRequestFullscreen();
}
});

Answer 1

controls.fullscreen and controls.video are both jQuery objects, not DOM elements. You want the elements inside the jQuery objects, which you can get with .get :

var controls = {
    video: $("#player").get(0),  //this is the video element
    fullscreen: $("#fullscreen").get(0)  //This is the fullscreen button.
};

jQuery objects don't have a requestFullscreen property, so none of your if statement were running (and if they had run, video.requestFullscreen wold have failed).