Since the YouTube API has no means of programmatically triggering fullscreen (apparently for good reasons, relating to legacy Flash support, as described here), I'm getting by just by using the HTML5 Element.requestFullscreen API to fullscreen the player IFrame.

Unfortunately, if a user triggers fullscreen in the YouTube player, then the player itself goes fullscreen instead of the IFrame, and doesn't produce any events to signal that it has done so. That breaks my UI and causes other synchronization problems when the rest of the application doesn't know what things are and are not fullscreen anymore. A partial solution is to use the chromeless player and then render my own player controls, so that users can't click the YouTube fullscreen button- but, it turns out that double clicking on a YouTube video will also cause it to enter fullscreen mode, again with no way of signalling the rest of the application that it has done so.

So, is there any consistent way of preventing an embedded YouTube player from going fullscreen under any circumstances, without impacting other functionality?

The best solution I have so far is to set pointer-events:none on the iframe. That's not quite perfect, however, as it also makes it impossible to dismiss ad banners displayed over YouTube videos. An ideal solution would block the "fullscreen on double-click" response, without messing up anything else. (Single-click to play, for example, is just fine, because the YouTube player does emit play events that let me keep the rest of the application in-sync.)

Since the YouTube API has no means of programmatically triggering fullscreen (apparently for good reasons, relating to legacy Flash support, as described here), I'm getting by just by using the HTML5 Element.requestFullscreen API to fullscreen the player IFrame.

Unfortunately, if a user triggers fullscreen in the YouTube player, then the player itself goes fullscreen instead of the IFrame, and doesn't produce any events to signal that it has done so. That breaks my UI and causes other synchronization problems when the rest of the application doesn't know what things are and are not fullscreen anymore. A partial solution is to use the chromeless player and then render my own player controls, so that users can't click the YouTube fullscreen button- but, it turns out that double clicking on a YouTube video will also cause it to enter fullscreen mode, again with no way of signalling the rest of the application that it has done so.

So, is there any consistent way of preventing an embedded YouTube player from going fullscreen under any circumstances, without impacting other functionality?

The best solution I have so far is to set pointer-events:none on the iframe. That's not quite perfect, however, as it also makes it impossible to dismiss ad banners displayed over YouTube videos. An ideal solution would block the "fullscreen on double-click" response, without messing up anything else. (Single-click to play, for example, is just fine, because the YouTube player does emit play events that let me keep the rest of the application in-sync.)

• javascript
• iframe
• video
• youtube
• html5-fullscreen

3 Answers 3

When embedding using the iframe tag, you can use the parameter fs = "0" to disable to the fullscreen button. See http://codepen.io/anon/pen/zvOqKJ

There is something weird going on with this. I was unable to prevent fullscreen when I passed in "fs: 0" with the playerVars as per this page

https://developers.google./youtube/player_parameters?playerVersion=HTML5

(even though some other player vars were making a difference)

God knows what's wrong, but I fixed it with:

var ourYT = document.getElementById('player');
ourYT.allowFullscreen = false;

Use this;

iframe {pointer-events: none;}

you can disabling click events on youtube player (play,pause,fullscreen);