Fullscreen API in HTML5

Introduction

When I was developing a site for college, there was a requirement to display video with an option to show the video in full-screen mode. Since it was a Silverlight application, we were using the Application.Current.Host.Content.IsFullScreen = true; to be set to true. And in the fullscreenchanged event, we need to handle the resizing of the elements accordingly.

But when we got HTML5, we now have an option in the JavaScript API called Fullscreen API. Yes, using Fullscreen API, we can render an element in fullscreen.

The Fullscreen JavaScript API provides an easy way for a web element to be rendered using the user's entire screen. Let us explain this with an example.

Properties and Methods

There are the following two properties available in the Fullscreen API.

fullscreenElemen
fullscreenEnabled

The API also has the following two methods:

requestFullscreen
exitFullscreen

Getting into Fullscreen Mode

The requestFullscreen() function prompts the user to allow the element to be rendered in fullscreen. If the user clicks on Allow, then the specific element will be rendered in fullscreen mode.

<video controls id="college-video">
<source src="somevideo.mp4"></source>
</video>
// Find the right method, call on correct element
function getIntoFullScreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// Launch fullscreen for browsers that support it!
getIntoFullScreen(document.getElementById("college-video")); // any individual element

When the user disallows the permission, the element will remain the same in the screen.

Getting out of Fullscreen Mode

The function exitFullscreen() is only available in the document object. Using it the element will be restored to its own state.

// fullscreen
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
// Cancel fullscreen for browsers that support it!
exitFullscreen();

CSS on Fullscreen

We need to add the following CSS rules to render the elements in full-screen mode.

:-webkit-full-screen {
/* properties */
}
:-moz-full-screen {
/* properties */
}
:-ms-fullscreen {
/* properties */
}
:full-screen {
/*pre-spec */
/* properties */
}
:fullscreen {
/* spec */
/* properties */
}
/* deeper elements */
:-webkit-full-screen video {
width: 100%;
height: 100%;
}
/* styling the backdrop*/
::backdrop {
/* properties */
}
::-ms-backdrop {
/* properties */
}

This is how to use the JavaScript Fullscreen API.

Happy Coding.