Making YouTube player go fullscreen via JavaScript

Question

I'm running into a bug when making the YouTube player to go into fullscreen mode via JavaScript.

I have a button that when it's clicked, it triggers the YT.Player.playVideo() method, while at the same time asking the containing iframe to go into fullscreen as follows:

thisVid = document.getElementById("ytIframe");

if (thisVid.requestFullscreen) {
    thisVid.requestFullscreen();
}
else if (thisVid.msRequestFullscreen) {
    thisVid.msRequestFullscreen();
}
else if (thisVid.mozRequestFullScreen) {
    thisVid.mozRequestFullScreen();
}
else if (thisVid.webkitRequestFullScreen) {
    thisVid.webkitRequestFullScreen();
}

(This is using Stack Overflow answers here and here)

The iframe successfully takes up the screen, however, the YouTube player doesn't know it's in fullscreen mode because the fullscreen button in the bottom-right is still available:

When I click it, it stays in fullscreen, and it tells me "youtube.com is now fullscreen":

This is a problem because the user needs to click the button twice to be able to exit fullscreen mode. Is there a way to tell the youtube player to go fullscreen, instead of just telling its containing iframe to do so?

Answer 1

Because the YouTube player actually exists inside an iFrame, when you use the javascript fullscreen API you're full screening the iframe, not the player. So as far as it's concerned it is not full screen. The only way to get the player to go to full screen mode is for the user to click the button manually (this is a legacy requirement, as the iframe could still contain the Flash player, and Flash has security measures to prevent programmatic fullscreening). For now your only solution is a custom control bar (and even then you won't be full screening the player, but just its container ... but at least you'd have control over what the buttons do).