Back to all guides

What is Fullscreen API and how to use it

APIWeb APIs

•

Mon Mar 20 2023

•

3 min read

Ushna Ijaz

Ushna Ijaz

We often visit different sites where we want to switch an element to fullscreen. Since, by default, full screen is only supported for video, viewing an image as a full screen becomes challenging. Fortunately, there is an API that exists for this purpose.

Fullscreen API is a Web API that you can use to toggle an element between full-screen and normal mode.

Let's look at Fullscreen API and how to add it to your web applications.

How does Fullscreen API work?

It is a JavaScript API that you can access via the Document Object Model (DOM) in modern web browsers. While in Fullscreen mode, you can view web content without being distracted by browser user interface (UI) elements like the address bar or toolbar.

This API works on a per-element basis. This means that rather than the entire web page, you can enable full-screen mode for a specific element, such as an image, canvas, etc. When an element enters full-screen mode, it takes up the entire screen space hiding all other elements.

Implementing Fullscreen API

To use the Fullscreen API, first, you must select the element you want to display in full-screen mode.

After selecting the element, you can use the requestFullscreen() method to display it in full-screen mode.

js
// Get the element you want to display in full-screen mode
const element = document.getElementById("myElement");
// Request that the element be displayed in full-screen mode
element.requestFullscreen();

Let’s look at a step-by-step process of how you can implement Fullscreen API on a specific HTML element.

Step #1

Please go ahead and create an HTML file. We will create two elements inside it, i.e., an image and a button. 

html
 <img id="image" src="./image.jpeg" />
 <button id="fullscreenButton">Fullscreen</button>

Now we need to select the image element that we will place in the fullscreen mode. We can do this using the image’s ID.

js
const image = document.getElementById("image");

Step #2

Let’s get the reference of the button to trigger the fullscreen mode using the Fullscreen API. This time, we can use the button’s ID for this purpose. 

js
const fullscreenButton = document.getElementById("fullscreenButton");

Step #3

Now we can add an event listener to our button to trigger full-screen mode for our image element.

js
fullscreenButton.addEventListener("click", function() {
  image.requestFullscreen();
});

Step #4

Fullscreen API offers a few events you can listen to detect when an element enters or exits fullscreen. It also provides another event that listens for errors while attempting to enter the full-screen mode.

  • fullscreenchange: This event is fired when full-screen mode is entered or exited.
  • fullscreenerror: This event is fired when an error occurs while attempting to enter full-screen mode.
js
document.addEventListener("fullscreenchange", function() {
    if (document.fullscreenElement) {
        console.log("Entered full-screen mode");
    } else {
        console.log("Exited full-screen mode");
    }
});

Here is the entire code:

html
<!DOCTYPE html>
<html>
   <head>
   <title>Fullscreen API Example</title>
   </head>
   <body>
      <div id="image-container">
         <img id="image" src="./image.jpeg" />
         <button id="fullscreenButton">Fullscreen</button>
      </div>
      <script>
         const image = document.getElementById("image");
         const fullscreenButton = document.getElementById("fullscreenButton");
         
         // toggle fullscreen
         fullscreenButton.addEventListener("click", function () {
           image.requestFullscreen();
         });
         
         // listens for fullscreen toggle
         document.addEventListener("fullscreenchange", function () {
           if (document.fullscreenElement) {
             console.log("Entered full-screen mode");
           } else {
             console.log("Exited full-screen mode");
           }
         });
      </script>
   </body>
</html>

Make sure you change image.jpeg to the name of your image file. Here’s what the output would look like:

Fullscreen API in real-time

Browser support

Modern desktop and mobile web browsers like Chrome, Firefox, Edge, and Safari widely adopt the Fullscreen API.

Wrap up

Now you know how simple integrating Fullscreen API in your web apps is. This simple feature can improve your app's user experience by providing more accessibility. So go ahead and try it out now.

# api# fullscreen api# web-api