HTML5 - Prevent Full Screen Mode
I am using the Fullscreen API with embedded YouTube video to determine if the browser window is full screen. I work great.
What I would like to do is prevent the default behavior in full screen mode from appearing. I would like to put in my full screen 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 this results in a bad and confusing experience for the user.
One way to solve the problem is to remove the full screen button using the YouTube Player API parameters and add my own button using my own logic, but this is not ideal because users can 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 help, so I got stuck at this step. How can I prevent the browser from entering full screen mode if it really is possible?
source to share
Using youtube iframe api
Disable fullscreen button: fs: 0
Disable keyboard controls: disablekb : 1
When loading the player, remove the full screen option:
// Get DOM video player not YT videoplayer
videoPlayer = document.getElementById('player');
// don't allow full screen
videoPlayer.allowFullscreen = false;
Enable fullscreen mode on the DOM player (iframe in our case) with Fullscreen_API
videoPlayer.requestFullScreen()
Full screen exit will be done when 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 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>
source to share
here's what i did :)
<script type="text/javascript">
// Entering fullscreen mode
$('#videoSrcBlk').click(function() {
$("#full-screen").click(function() {
$(this).attr('id');
var vid = document.getElementById('selfVideo');
vid.removeAttribute("controls");
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen(); // Firefox
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen(); // Chrome and Safari
}
});
});
hope this help :)
source to share