Back to Top

How to Use the HTML5 Full-Screen API

HTML5 Full-Screen API

You have always opened a web page on the browser screen and when you need a fullscreen mode of the browser for a web page, you can simply press F11 on windows or Shift + Command + F to a Mac. However, sometimes you want to trigger Fullscreen mode automatically on a load of page or any event performed without using the additional keys of a keyboard. For that, HTML5 Fullscreen API is very useful. You can simply setup Fullscreen mode in your browser using the API.

What is HTML5 Fullscreen API?

HTML5 comes with the variety of individual special APIs. Among them, one of the useful API is the Fullscreen API that we are going to discuss today. HTML5 Fullscreen API allows you to do something that was previously possible only by Flash and that is to display the application in full-screen mode.This feature is useful when you create a video player, an image gallery or a gaming software. This API allows you to set the entire website or an element of the page into the Fullscreen mode using the native browser functionality.

How does the HTML5 fullscreen API works?

HTML5 fullscreen API is very convenient to implement using the methods and properties.

There are following specification of an HTML5 fullscreen API:

2 methods: requestFullScreen and cancelFullScreen
2 properties object document: fullscreenElement and fullscreenEnabled
1 event fullscreenchange

So let’s see how it works. First of let’e check the syntax you can write to support in different browsers.

Example to display in full screen mode:

This example explains how to display HTML5 fullscreen API in fullscreen mode. Let’s start with the HTML code. Here, I have created a div element, which wraps the image element.

Now, this is javascript code which will work when clicking on div element and it will call the requestFullscreen() function to change the screen into fullscreen mode. Here I have written if else condition to support HTML5 fullscreen API in the different browser. In below code, If at least one method returns true, then you can get the idea that the user’s browser supports HTML5 Fullscreen API or not.

Example to Exit from full screen mode

HTML5 Fullscreen API provides a method for exiting from the fullscreen mode so you just need to call that method to exit. You can also use special methods with prefixes to support exit in different browsers. Here is the method used to exit from the fullscreen mode using HTML5 Fullscreen API.

Here is the full code to see how to display in full screen mode and exit from the fullscreen mode:

Here, first you can check screen is already in fullscreen mode, then exit from the fullscreen mode or enter into the fullscreen mode. In the condition, checking to see whether an item is displayed in full-screen mode and if a condition is obtained, you can perform exitFullScreen, to return it to normal screen otherwise it displays in full-screen mode using the method requestFullscreen.

Browser support

Right now, HTML5 Fullscreen API works only in Google Chrome, Safari and Firefox. Like CSS3, the syntax used prefixes as long as that API is in an experimental stage.

How to CSS for HTML5 fullscreen API?

The pseudo-classes :full-screen designed to style elements in full-screen mode for HTML5 Fullscreen API.
Here is an example with the prefixes -WebKit-and -moz-that after a while you can delete and just use:full-screen

HTML5 Fullscreen API is quite easy to learn and use than the JavaScript API. There might be certain problems cross-browser, but this is a matter of time.

Comments (3)

  1. Wow I get new knowledge, thank you mam

  2. thank you for the information, very useful and helpful

  3. I wanna know about coding completely. But in i place, there no programmer who can teach me. So i just reading article like this. Thank you for sharing.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

Angular JS MVC Architecture with example

Posted on 3 years ago