This post is a part 4 of HTML5 Full Screen API Tutorial with Demo post series.
Fullscreen API is available in desktop and mobile browsers.
Fullscreen API allows you to view a HTML element in full screen mode. Its useful while viewing images and videos. Its different than making the whole webpage full screen.
Here is a look at Fullscreen API:
View Demo
<!doctype html>
<html>
<head>
<title>Fullscreen API</title>
<script type="text/javascript">
function full_screen()
{
// check if user allows full screen of elements. This can be enabled or disabled in browser config. By default its enabled.
//its also used to check if browser supports full screen api.
if("fullscreenEnabled" in document || "webkitFullscreenEnabled" in document || "mozFullScreenEnabled" in document || "msFullscreenEnabled" in document)
{
if(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled)
{
console.log("User allows fullscreen");
var element = document.getElementById("box");
//requestFullscreen is used to display an element in full screen mode.
if("requestFullscreen" in element)
{
element.requestFullscreen();
}
else if ("webkitRequestFullscreen" in element)
{
element.webkitRequestFullscreen();
}
else if ("mozRequestFullScreen" in element)
{
element.mozRequestFullScreen();
}
else if ("msRequestFullscreen" in element)
{
element.msRequestFullscreen();
}
}
}
else
{
console.log("User doesn't allow full screen");
}
}
function screen_change()
{
//fullscreenElement is assigned to html element if any element is in full screen mode.
if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)
{
console.log("Current full screen element is : " + (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement))
}
else
{
// exitFullscreen us used to exit full screen manually
if ("exitFullscreen" in document)
{
document.exitFullscreen();
}
else if ("webkitExitFullscreen" in document)
{
document.webkitExitFullscreen();
}
else if ("mozCancelFullScreen" in document)
{
document.mozCancelFullScreen();
}
else if ("msExitFullscreen" in document)
{
document.msExitFullscreen();
}
}
}
//called when an event goes full screen and vice-versa.
document.addEventListener("fullscreenchange", screen_change);
document.addEventListener("webkitfullscreenchange", screen_change);
document.addEventListener("mozfullscreenchange", screen_change);
document.addEventListener("MSFullscreenChange", screen_change);
//called when requestFullscreen(); fails. it may fail if iframe don't have allowfullscreen attribute enabled or for something else.
document.addEventListener("fullscreenerror", function(){console.log("Full screen failed");});
document.addEventListener("webkitfullscreenerror", function(){console.log("Full screen failed");});
document.addEventListener("mozfullscreenerror", function(){console.log("Full screen failed");});
document.addEventListener("MSFullscreenError", function(){console.log("Full screen failed");});
</script>
<style type="text/css">
div
{
height: 300px;
width: 300px;
background-color: green;
}
div:-webkit-full-screen
{
background-color: yellow;
}
div:-moz-full-screen
{
background-color: yellow;
}
div:-ms-fullscreen
{
background-color: yellow;
}
div:fullscreen
{
background-color: yellow;
}
/*backdrop pseudo element is used to style element behing the full screen element.*/
:fullscreen::backdrop
{
background-color: red;
}
:-webkit-full-screen::-webkit-backdrop
{
background-color: red;
}
:-moz-full-screen::-moz-backdrop {
background-color: red;
}
:-ms-fullscreen::-ms-backdrop {
background-color: red; /* dark blue */
}
</style>
</head>
<body>
<div id="box" onclick="full_screen();"></div>
</body>
</html>
<html>
<head>
<title>Fullscreen API</title>
<script type="text/javascript">
function full_screen()
{
// check if user allows full screen of elements. This can be enabled or disabled in browser config. By default its enabled.
//its also used to check if browser supports full screen api.
if("fullscreenEnabled" in document || "webkitFullscreenEnabled" in document || "mozFullScreenEnabled" in document || "msFullscreenEnabled" in document)
{
if(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled)
{
console.log("User allows fullscreen");
var element = document.getElementById("box");
//requestFullscreen is used to display an element in full screen mode.
if("requestFullscreen" in element)
{
element.requestFullscreen();
}
else if ("webkitRequestFullscreen" in element)
{
element.webkitRequestFullscreen();
}
else if ("mozRequestFullScreen" in element)
{
element.mozRequestFullScreen();
}
else if ("msRequestFullscreen" in element)
{
element.msRequestFullscreen();
}
}
}
else
{
console.log("User doesn't allow full screen");
}
}
function screen_change()
{
//fullscreenElement is assigned to html element if any element is in full screen mode.
if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)
{
console.log("Current full screen element is : " + (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement))
}
else
{
// exitFullscreen us used to exit full screen manually
if ("exitFullscreen" in document)
{
document.exitFullscreen();
}
else if ("webkitExitFullscreen" in document)
{
document.webkitExitFullscreen();
}
else if ("mozCancelFullScreen" in document)
{
document.mozCancelFullScreen();
}
else if ("msExitFullscreen" in document)
{
document.msExitFullscreen();
}
}
}
//called when an event goes full screen and vice-versa.
document.addEventListener("fullscreenchange", screen_change);
document.addEventListener("webkitfullscreenchange", screen_change);
document.addEventListener("mozfullscreenchange", screen_change);
document.addEventListener("MSFullscreenChange", screen_change);
//called when requestFullscreen(); fails. it may fail if iframe don't have allowfullscreen attribute enabled or for something else.
document.addEventListener("fullscreenerror", function(){console.log("Full screen failed");});
document.addEventListener("webkitfullscreenerror", function(){console.log("Full screen failed");});
document.addEventListener("mozfullscreenerror", function(){console.log("Full screen failed");});
document.addEventListener("MSFullscreenError", function(){console.log("Full screen failed");});
</script>
<style type="text/css">
div
{
height: 300px;
width: 300px;
background-color: green;
}
div:-webkit-full-screen
{
background-color: yellow;
}
div:-moz-full-screen
{
background-color: yellow;
}
div:-ms-fullscreen
{
background-color: yellow;
}
div:fullscreen
{
background-color: yellow;
}
/*backdrop pseudo element is used to style element behing the full screen element.*/
:fullscreen::backdrop
{
background-color: red;
}
:-webkit-full-screen::-webkit-backdrop
{
background-color: red;
}
:-moz-full-screen::-moz-backdrop {
background-color: red;
}
:-ms-fullscreen::-ms-backdrop {
background-color: red; /* dark blue */
}
</style>
</head>
<body>
<div id="box" onclick="full_screen();"></div>
</body>
</html>
