webkitRequestFullScreen is not a function

Question

I was trying to call a function to make the screen return to full screen mode when ESC is pressed. (That is, when ESC is pressed the screen goes to normal mode. I need to make it go back to full screen mode.) I identified that the ESC click event called the full screen function again like,

$(document).ready(function (){
var screen_change_events = "webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange";
$(document).on(screen_change_events, function () {
if (!window.screenTop && !window.screenY) {
$("iframe")['webkitRequestFullScreen'](); // Identified that ESC is triggered.So need to make it again fullscreen mode
}else{
//alert("no")
}
});
});

But I’m getting this error:

Uncaught TypeError: $(...).webkitRequestFullScreen is not a function

Answer 1

With $("iframe")['webkitRequestFullScreen'](); you are making a jQuery object and attempting to call its "webkitRequestFullScreen" method, but jQuery objects don't have this method - only element objects do.

You can get the elements from a jQuery object by indexing them like you would with an array (i.e. $("iframe")[0].webkitRequestFullScreen()), but if you can, it's best to give the iframe element that you are selecting a unique ID, and then use that:

In your HTML:

<iframe id="myvideo" src="..."></iframe>

In your JavaScript:

var elem = document.getElementById("myvideo");
if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Also, note that prefixing the method with "webkit" will only work on Webkit-based browsers. To see the different methods available on different browsers and how to call them, see the MDN docs.