Having the ability to take elements, or even entire pages fullscreen allows developers to create fully immersive experiences for the user. You can remove the distractions from other apps and help the user to focus on the task at hand. Whether you’re watching a movie, playing a game, or just trying to get some work done, going fullscreen can really help to keep you focussed.

In this blog post you’re going to learn the ins and outs of the Fullscreen API. You’ll be learning how to take any element fullscreen, and how to style fullscreen elements using CSS pseudo-classes.

Browser Support for the Fullscreen API

All of the major desktop browsers include support for the Fullscreen API. However the implementations across these different browsers are inconsistent. Aside from the familiar vendor prefixes, the names of methods vary, as does the use of camelcase.

In this post I’ll take you through the various different implementations as they stand today. Keep in mind that these may change in the future.

Going Fullscreen

You can make any HTML element fullscreen using the requestFullscreen method. For example, you could make the whole page fullscreen using the following statement.

document.documentElement.requestFullscreen();

Note: If you call requestFullscreen on the document body, WebKit and Blink based browsers will squash the width of the page to the smallest size possible to display the content. To avoid this you should go fullscreen on the document element instead (document.documentElement).

The requestFullscreen method must be called in response to a direct user action, like a mouse click or a key press. This prevents websites from using the API for undesirable purposes, like displaying fullscreen ads.

The implementations of requestFullscreen vary across browsers. The examples below show the methods for WebKit, Gecko and Trident browsers. Note the uppercase
’S’ in the Gecko implementation.

Examples of using the Fullscreen API

Now that you understand how the API works lets take a look at a couple of examples. You’ve already seen how to make the entire document fullscreen. In this section you’re going to look at examples that use videos and images.

Fullscreen Videos

A common use case of the Fullscreen API is to display media like videos fullscreen. This can be done by calling the requestFullscreen method directly on the <video> element. Remember that this will need to occur as the result of a user interaction.

Of course this example shows the nice, clean standardised version of the API. For this to work you would need to use the vendor-prefixed versions mentioned earlier.

Fullscreen Images

You can display images fullscreen in much the same way as videos. In WebKit browsers, images will be displayed in the center of the screen, and as close to their original dimensions as possible. Firefox will stretch images to fill the entire screen.

Final Thoughts

The Fullscreen API enables web developers to match the immersive experiences that were only previously possible with native applications. The current implementations of this API may be a little inconsistent, but this feature is certainly not going to get any less important as time goes by.

One thing we haven’t spoken about a lot in this post is how the Fullscreen API applies to mobile. Mobile devices are arguably one of the most important platforms for this new browser feature. The inherent lack of screen space on a mobile device means that any extra pixels that you can get your hands on are a big bonus.

Just because you now have the power to go fullscreen doesn’t mean that you should though. You need to seriously consider whether your desire to go fullscreen is just a greed for attention, or if viewing your app fullscreen will make a significant and positive impact to the user experience.

Well, availing great user experience is the most significant goal for the developer and this post with tips to avail full screen API is a very much beneficial to achieve this goal. Very nice and appreciable post, letting the developers learn one very significant function to avail great user experience.