How to Apply HTML5 Full Screen API Quickly

We are all familiar with the full screen viewing of web pages. Just a single tap on the F11 key will force your browser to go full screen. What if don’t want the entire page to go full screen, but a specific portion or an element of the page to go full screen? Well, it is possible. With the arrival of HTML5, a lot of new APIs were introduced. It includes the API to make elements view in full screen mode while browsing on the web. It is called the “Full screen API” we will show you how to make the most out of this API.

There are two properties that specify the state of the API. They are
• Fullscreenenabled – tells whether the full screen mode is active or not
• Fullscreenelement – specifies which element of the web page has gone full screen

document.fullscreenEnabled
It tells whether the document allows the full screen mode. It also checks for the browser compatibility. If both conditions are satisfied, it returns true value.

if (document.fullscreenEnabled)
{
// further code
}

For cross browser support,

if (document.mozFullScreenEnabled || document.fullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled )
{
// further code goes here
}

document.fullscreenElement
This property is used to specify which element of the web page is currently in the full screen mode. It will return that element. If no element is in full screen, it will return a null value.

if (document.fullscreenElement)
{
// further code
}

For cross browser support,

if (document.webkitFullscreenElement || document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)
{
// Further code goes here
}

element.requestFullscreen()
This method is used to make a request for an element to enter into the full screen mode.Below is the syntax

document.getElementById(“element id goes here”).requestFullscreen();

for cross browser support,

var ele = document.getElementById(“element id goes here”);

// going full-screen
if (ele.requestFullscreen) {
ele.requestFullscreen();
}
else if (ele.webkitRequestFullscreen) {
ele.webkitRequestFullscreen();
}
else if (ele.msRequestFullscreen) {
ele.msRequestFullscreen();
}
else if (ele.mozRequestFullScreen) {
ele.mozRequestFullScreen();
}

Each element in a web page is given a unique ID called element ID which identifies the elements in a web page. By entering the element id as the parameter of the method getElementById(), that elemnt can be made into full screen.

document.exitFullscreen
now that an element has gone full screen. The above method is used to exit the full screen mode. Here is the code

document.exitFullscreen;

For cross browser compatibility, use the below code

if (document.exitFullscreen)
{
document.exitFullscreen();
}
else if (document.webkitExitFullscreen)
{
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen)
{
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen)
{
document.mozCancelFullScreen();
}

There is no need to pass the element id here. It will automatically detect which element id in full screen mode and will make it exit.

Full screen CSS
The elements that made full screen can be controlled using the CSS.

:fullscreen {
/* properties */
}
:-webkit-full-screen {
/* properties */
}
:-ms-fullscreen {
/* properties */
}
:-moz-full-screen {
/* properties */
}

::backdrop {
/* properties */
}
::-ms-backdrop {
/* properties */
}

The HTML

The CSS

The JavaScript

The FullScreen APIs are supported by all of the latest web browsers. The following versions are supported:

 Internet Explorer 11+
 Firefox 10+
 Chrome 15+
 Safari 5.1+
 Opera 12.10+

Don’t try to use this API everywhere. For an instance, if you are a blogger, who writes stuff about politics or economics, then you don’t need to use the FullScreen API except for the images. Slideshows, videos and games are preferred to be made full screen Choose the elements wisely for enhancing your website. Make sure that the elements are of high resolution before applying the API.