We Keep Coding

Click/tap fullscreen html5 video to exit fullscreen

Goal
I have a video setup that plays fullscreen when a link on the page is tapped on a mobile device. This works fine.
I have hidden the HTML5 video controls via CSS - I want the video to be
completely clean without any controls.
I want to be able to close the fullscreen video by tapping again the fullscreen video itself.
I also need to be able to add a class to the body and pause the video on close. The reason for adding the class is that I want to show and hide the video itself, so adding the class lets me control the css for the whole page as a state change.
Problem
When I hit esc for example, or Back on an Android mobile it obviously won't run the function.
How can I detect when fullscreen has been exited to run whatever functions I want?
Code
videoSmallTrigger.on('click', function() {
// Activate
if (!document.isFullScreen && !document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement && !document.msFullscreenElement) {
console.log('trigger open');
launchFullscreen(videoSmallID);
body.addClass('fullscreen-video-sm');
videoSmall.get(0).play();
}
// Deactivate
else {
console.log('trigger close');
exitFullscreen();
body.removeClass('fullscreen-video-sm');
videoSmall.get(0).pause();
}
});
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}

Solved it using a combination of this post and some of the comments beneath it:
How to detect when a page exits fullscreen?
if (document.addEventListener) {
document.addEventListener('fullscreenchange', exitHandler, false);
document.addEventListener('mozfullscreenchange', exitHandler, false);
document.addEventListener('MSFullscreenChange', exitHandler, false);
document.addEventListener('webkitfullscreenchange', exitHandler, false);
}
function exitHandler() {
if (!document.isFullScreen && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
// Code to run when you exit fullscreen by hitting the ESC key etc.
body.removeClass('fullscreen-video-sm');
videoSmall.get(0).pause();
}
}

How to use jQuery fullScreen in mobile? [duplicate]

I'm trying to make a div go fullscreen, when a user clicks a button on a website.
Only thing is, every browser seems to want to work except for Safari on IOS.
What will I need to do to be able to make it fullscreen? I've tried researching, but unable to find anything.
Heres my current code:
<script type="text/javascript">
function goFullscreen(id) {
var element = document.getElementById(id);
var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null);
var docElm = document.documentElement;
if (!isInFullScreen) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
</script>

As mentioned on many posts, there is no way to switch to fullscreen on IOS >=10 in Safari and Chrome. It is because the Fullscreen API is not supported:
Can I Use Full Screen API
open webpage in fullscreen in Safari on iOS
Full screen api HTML5 and Safari (iOS 6)
You have two possible tricks:
Inform the user to switch to landscape mode. Indeed, you can't hardcode this and iOS Chrome can't do this too (Prevent orientation change in iOS Safari).
if your webpage is exported in a web app and you configure the meta balizes correctly (Optimizing Full Screen Mobile Web App for iOS).

Javascript fullscreen closes on changing page

I have a button that helps me to open a page in full screen. But when I leave the page the script closes the fullscreen.
Does someone know how I can stay fullscreen when I go to another page?
Here is my full script:
<script type="text/javascript">
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
</script>

It cannot be done.
From - https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
In addition, navigating to another page, changing tabs, or switching
to another application (using, for example, Alt-Tab) while in
fullscreen mode exits fullscreen mode as well.
Update -
F11 - makes browser into full screen mode which does not utilize Fullscreen API

full screen issue in html while redirect page [duplicate]

This question already has an answer here:
javascript - Full screen
(1 answer)
Closed 7 years ago.
When I am putting below code for full screen but when I redirect another page full screen is not working .how can do this when redirect full screen is not close.My full screen code is here.
<script type="text/javascript">
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
</script>
please help me.

[Extracted from my own answer to a similar question]:
This issue happens because there are two different full screen modes:
One applied to elements/documents that you trigger using JavaScript (the one you are using with the API). This fullscreen is lost when the page reloads or when you browse to a different page.
Another native to the browser that is set by the user with F11 (applied to the browser itself, and not to the page/document: if you reload or browse to a different site, the browser will continue in fullscreen mode).
[For your particular case]:
You are using the Fullscreen API, so when you navigate to a different page the full screen is lost (because it applies to that particular document that is left behind).
One possible solution would be to have an iframe that occupies the whole size of the screen, and apply the full screen to the document that contains it. That way, the user will move within the iframe that will be in a full-screen document.
Something like this (you will need to copy this code into your own file as due to security reasons, frames are not allowed in the code snippets):
function toggleFullScreen() {
// hide the button
document.getElementById("mybutton").style.display = "none";
// your content
if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
#mybutton { z-index:2; position:absolute; }
iframe { z-index:1; position:absolute; top:0; left:0; width:100%; height:100%; }
<button id="mybutton" onclick="toggleFullScreen()">Full Screen</button>
<iframe src="http://stackoverflow.com"></iframe>

Transitioning the browser to fullscreen revert to normal when clicking on a link

I'm building a web based management software, and want to add the option to enlarge it to fullscreen for just having as much space as possible.
To do this I've tried some jquery plugin and the following code
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
The problem is that when I click on any link and the page reloads, it revert to normal mode.
This doesn't happen when clicking F11 on the keyboard.
It's an api's limit or there's a way to perfectly emulate the F11 mode?