I'm using the Fullscreen API with an embedded YouTube video to detect whether or not the browser window has entered fullscreen mode. I have that working great.
What I'd like to do is prevent from occurring the default behavior of entering fullscreen mode. I'd like to put in my own fullscreen mode logic so that I can overlay DOM elements on top of the YouTube Player. Currently, I can exit fullscreen mode immediately after entering it, but that results in a poor and confusing experience for the user.
One workaround is to remove the fullscreen button using YouTube's Player API parameters and add my own button with my own logic, but this is not ideal because users can still double-click on the YouTube player to make it full screen.
Here's my code for detecting the fullscreen state of the browser:
$(document).on("fullscreenchange webkitfullscreenchange msfullscreenchange mozfullscreenchange", function(event)
{
onFullScreenChange(event);
});
function onFullScreenChange(event)
{
var fullScreenElement =
document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
var isFullscreen = !!fullScreenElement;
console.log("In fullscreen mode?", isFullscreen);
if (isFullscreen === true)
{
// TODO: Prevent the browser from entering full screen mode. These three lines don't prevent that behavior
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
return false;
// The commented code below works. Ideally, we'd want to prevent the browser from even entering full screen mode
//document.webkitExitFullscreen();
}
}
Using preventDefault(), stopPropagation(), and stopImmediatePropagation() didn't work, so I'm stuck at this point. How can I prevent the browser from entering fullscreen mode, if indeed it is possible?
Using youtube iframe api
Disable full screen button: fs: 0
Disable Keyboard controls: disablekb: 1
When player loaded, remove full-screen option:
// Get DOM video player not YT videoplayer
videoPlayer = document.getElementById('player');
// don't allow full screen
videoPlayer.allowFullscreen = false;
Trigger full-screen on DOM player (iframe in our case) with Fullscreen_API
videoPlayer.requestFullScreen()
Full screen leave will happen if ESC key is pressed or video ends (custom event handling)
JsFiddle Working example:
<!DOCTYPE html>
<html>
<body>
<!-- The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<br />
<button id="fullScreenPlayer">Full Screen Player</button>
<script>
// DOM player
var videoPlayer;
// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player',
{
height: '390',
width: '640',
videoId: 'nAgKA7R4Fz4',
// params: https://developers.google.com/youtube/player_parameters?playerVersion=HTML5
playerVars: { 'fs': 0, 'disablekb': 1, 'rel': 0 },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
// Get DOM video player not YT videoplayer
videoPlayer = document.getElementById('player');
// don't allow full screen
videoPlayer.allowFullscreen = false;
// Listen for fulscreen changes, if you need custom logic here, but I won't recommned that, it's to complex and you don't have control inside YT iframe
videoPlayer.addEventListener("fullscreenchange", fullScreeCallback, false);
videoPlayer.addEventListener("webkitfullscreenchange", fullScreeCallback, false);
videoPlayer.addEventListener("msfullscreenchange", fullScreeCallback, false);
videoPlayer.addEventListener("mozfullscreenchange", fullScreeCallback, false);
}
// If the video reach the end then player will leave full screen
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
leaveFullscreen();
}
}
function stopVideo() {
player.stopVideo();
}
// fullscreen event handller
function fullScreeCallback(e) {
// do what you like when you catch the event
console.log(e);
return false;
}
var goFullscreen = function () {
if (videoPlayer === undefined) throw "player is undefined";
if (videoPlayer.requestFullScreen) {
videoPlayer.requestFullScreen();
} else if (videoPlayer.mozRequestFullScreen) {
videoPlayer.mozRequestFullScreen();
} else if (videoPlayer.webkitRequestFullScreen) {
videoPlayer.webkitRequestFullScreen();
}
}
var leaveFullscreen = function () {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
document.getElementById('fullScreenPlayer').addEventListener("click", function(e) {
goFullscreen();
}, false);
</script>
</body>
</html>