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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // W3C Default element.requestFullscreen();//display fullscreen mode document.exitFullscreen();//exit from fullscreen mode // Firefox element.mozRequestFullScreen(); document.mozCancelFullScreen(); // Webkit (works in Safari and Chrome Canary) element.webkitRequestFullScreen(); document.webkitExitFullscreen(); // Internet Explorer element.msRequestFullscreen(); document.msExitFullscreen(); |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | document.getElementById("fullscreen").addEventListener("click", function() { var docElement = document.documentElement // display the item in fullscreen mode if (docElement.requestFullscreen) docElement.requestFullscreen(); else if (docElement.mozRequestFullScreen) docElement.mozRequestFullScreen(); else if (docElement.msRequestFullscreen) docElement.msRequestFullscreen(); else if (docElement.webkitRequestFullScreen) docElement.webkitRequestFullScreen(); }); |
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.
1 2 3 | document.exitFullScreen(); |
Here is the full code to see how to display in full screen mode and exit from the fullscreen mode:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | document.getElementById("fullscreen").addEventListener("click", function() { if (!((document.fullScreenElement && document.fullScreenElement !== null) || (document.msFullscreenElement && document.msFullscreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen))) { var docElement = document.documentElement // display the item in fullscreen mode if (docElement.requestFullscreen) docElement.requestFullscreen(); else if (docElement.mozRequestFullScreen) docElement.mozRequestFullScreen(); else if (docElement.msRequestFullscreen) docElement.msRequestFullscreen(); else if (docElement.webkitRequestFullScreen) docElement.webkitRequestFullScreen(); } else { // exit from the fullscreen mode if (document.exitFullScreen) return document.exitFullScreen(); else if (document.webkitExitFullscreen) return document.webkitExitFullscreen(); else if (document.msExitFullscreen) return document.msExitFullscreen(); else if (document.mozCancelFullScreen) return document.mozCancelFullScreen(); } }); |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /* Blue background for full-screen mode*/ :-moz-full-screen { background: blue; } :-webkit-full-screen { background: blue; } /* Full screen mode image size change */ :-moz-full-screen img { width: 100%; height: 100%; } :-webkit-full-screen img { width: 100%; height: 100%; } |
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)