The HTML5 Full-Screen API

The Fullscreen API allows a DOM element (and its descendants) to be represented in full screen. What it allows is to visualize the page by removing any element of the browser (menus, tabs,...). With this we can put from the document itself to full screen, video elements, images,...

Fullscreen API methods

The first thing we need to know is the methods that allow us to handle the Fullscreen API. The methods that allow us to visualize an element in full screen are:



It asks the user agent (which will normally be the browser) to be able to display an element in full screen. The Element.requestFullscreen method will return a promise or Promise that will be solved once the full screen mode is activated.


Requests the user agent to exit the full screen display mode to return to normal display. The Document.exitFullscreen method will return a Promise that will be solved once the full screen mode has been disabled.

How to Launch the Fullscreen Mode


The fullscreen API's requestFullScreen method is still prefixed in some browsers, so we'll need to do a bit ofsearching to find it:

function getFullscreen(element){
if(element.requestFullscreen) {
} else if(element.mozRequestFullScreen) {
} else if(element.webkitRequestFullscreen) {
} else if(element.msRequestFullscreen) {

We see that the first thing we do is check if the element on which we want to put the full screen supports this capability. This information is given by the requestFullscreen property. If it does support it will be sufficient to invoke the requestFullscreen method on the element. In this case we use the hacks of the different browsers.

Now we simply need to call our getFullscreen method by passing it the element that represents the entire document.documentElement.


Full-screen item

Now that we have seen how to put the document in full screen, let's move on to perform the same action with an element. In this case we are going to use a video element to show how we can put an element in full screen. The first thing we'll do is create the video element on our page:

<video id="myvideo" src="video.ogv" controls>
Your browser does not support the element <code>video</code>.

The next thing we'll do is invoke the getFullscreen method we've defined. But in this case we'll call the video element. To get the video element we'll need to use the getElementById method.


How to Remove Fullscreen Mode


The remove FullScreen method you have to morphs the browser chrome back into standard layout:

function exitFullscreen() {
if(document.exitFullscreen) {
} else if(document.mozCancelFullScreen) {
} else if(document.webkitExitFullscreen) {

Once we have this method we simply have to invoke it to get out of the full screen.


Fullscreen API properties

To be able to handle the Fullscreen API we have two properties:

1. DocumentOrShadowRoot.fullscreenElement


2. Document.fullscreenEnabled


The fullscreenElement property tells us which element of the DOM or the "shadow DOM" is being displayed in full screen.


Through the property fullscreenEnabled indicates if we can activate the full screen mode, which would return the true value or if the full screen mode is not available. In this second case the value of the property will be false.

How to know if the full screen is active

Playing with the properties fullscreenEnabled and fullscreenElement we can check if we have the user agent being shown in full screen and also we can know which element is the one being shown in full screen.

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
console.log('enabled:' + fullscreenEnabled);
console.log('element:' + fullscreenElement);

In the same way as in the previous cases we have to rely on the hacks that the different browsers have in order to evaluate the content of the properties.

Fullscreen API events

Along with the properties and method of the Fullscreen API we will have the event management. This event management will help us to know when there has been a change to or from the full screen or when an error has occurred in the management of the full screen.

The events we can manage are:

  • Document.onfullscreenchange
  • Document.onfullscreenerror
  • Element.onfullscreenchange
  • Element.onfullscreenerror

We can see that the events can be applied to a whole element or to the whole document. All depending on what we are managing the whole screen.


An event is sent either to a document (or Document) or to an element (Element), depending on what we are trying to show full screen, either a specific element or the whole page or document.


An error event is sent to the document or item that attempted to display in full screen or exit it.

Controlling the switch to full screen

We have already seen how we can help the user to put a document or elements to full screen. But, what happens if it is the user himself who puts the user agent to full screen? How can we take advantage of knowing that he is visualizing the content in that way?

In this case what we have to do is to control the onfullscreenchange event. To do this we will register a listener that controls it.


We have put all the hacks of the onfullscreenchange event and sent them to changeScreen  function.

function changeScreen(event){
console.log("Change to full screen " +;

Fullscreen API dictionaries

The Fullscreenc API has a FullscreenOptions dictionary. This dictionary can be sent to the Element.requestFullscreen method to specify additional properties.

Fullscreen API Multi-Browser Support

In this article we have seen how to handle the methods defined by the Fullscreen API standard, although the support may vary by each web browser and that is why we will have to rely on the hack of each browser.

In this way you will have to take into consideration the following:

  • .mozRequestFullScreen()
  • .webkitRequestFullscreen()
  • .msRequestFullscreen();
by Silvia Mazzetta Date: 03-05-2020 html5 web tutorials html tools web design web development video fullscreen hits : 6414  
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 7 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products. 


Related Posts

How to Send Email from an HTML Contact Form

In today’s article we will write about how to make a working form that upon hitting that submit button will be functional and send the email (to you as a…

How to make a multilingual website without redirect

Today, we're going to talk about how to implement a simple language selector on the basic static website, without the need of any backend or database calls or redirection to…

Starting with Bootstrap-Vue step by step

Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…

Bootstrap 5 beta2. What offers?

Since the release of the Bootstrap 4 is three years, in this article we will present what is new in the world’s most popular framework for building responsive, mobile-first sites.…

Graphic design and its impact on Web Development

In today's article we will explain the concept of graphic design, its fundamentals and what it brings into web development. Graphic design is applied to everything visual, believe or not,…

Validating HTML forms using BULMA and vanilla JavaScript

Today we are going to write about contact forms and how to validate them using JavaScript. The contact form seems to be one of the top features of every basic home…

MAME Multiple Arcade Machine Emulator: How to download and configure this arcade emulator for Windows

Despite the fact that new state-of-the-art computer games are coming out every so often, the whole retro theme is very appealing to users who are looking to relive the long…

HTTP Cookies: how they work and how to use them

Today we are going to write about the way to store data in a browser, why websites use cookies and how they work in detail. Continue reading to find out how…

How to write our own Privacy Policy

In this article we will talk about Privacy Policy statements, how you can write one and implement it on your page. Why did it pop up? These days when we browse on…

How to turn your smartphone into a webcam for your pc

With the propagation of Covid-19 we all had to adapt to a new quarantine situation at home, and since the human being needs to communicate constantly, we used the internet…

Best ways to start a video conference without registration

Nowadays it is very easy to make a video conference without using Whatsapp, Skype or any of those platforms that require user registration, phone, email and so on. Today we will…

Is Old School RuneScape Still Popular?

Since the launch of RuneScape 3 there are two versions of RuneScape running simultaneously: RuneScape 3 and Old School RuneScape. At first glance it seems that having two iterations of…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration