Web API Fullscreen

Last Updated : 23 Nov, 2023

Web API Fullscreen is a functionality found in web browsers that empowers web applications to make use of the entire screen space effectively converting the browser into a Fullscreen mode. This API enables you to utilize the screen to users ensuring that your content takes center stage and minimizing any potential distractions. In this article, we will delve deep into the Fullscreen Web API.

Concepts and usage

Video Players and Streaming Services: Fullscreen mode is often used in video players and streaming platforms to provide an immersive viewing experience. Users can watch movies, TV shows, or live streams without distractions from browser elements.
E-Learning and Educational Platforms: In online courses and e-learning platforms, fullscreen mode can be used to present educational content more effectively. It eliminates distractions, making it easier for students to concentrate on the lesson materials.
Web-Based Games: Many web-based games utilize fullscreen mode to maximize the gaming experience. It removes browser toolbars and provides a more immersive gaming environment.
Presentations and Slides: Web-based presentation tools often offer fullscreen mode for presenters to display slides without browser clutter during a live presentation.
Kiosks and Public Displays: In public spaces or kiosk applications, Fullscreen mode can be used to create interactive displays, informational kiosks, and digital signage.
The Fullscreen Web API provides a set of interfaces, methods, properties, and events that enable web developers to interact with Fullscreen mode in web applications. Here’s a list of these elements with brief descriptions.

Web API Fullscreen Methods

requestFullscreen(): It is used to make an element enter fullscreen mode. When this method is called the contexts element or shadow DOM will occupy the screen. It is often employed with HTML elements, like <div> <video> or <iframe>.
exitFullscreen(): To exit fullscreen mode you can use the exitFullscreen() method, on the document. This method will remove the element currently in fullscreen mode. Restore the viewport, to its state.

Web API Fullscreen Events

fullscreenchange: Fired when the fullscreen mode changes (entering or exiting).
fullscreenerror: Fired when an error occurs while attempting to enter Fullscreen mode.

Example: In this example, The interface shows two buttons at first; “Enter Fullscreen” and “Exit Fullscreen.” Initially only the “Enter Fullscreen” button is visible. When you click on the “Enter Fullscreen” button it checks if the browser supports Fullscreen mode using the requestFullscreen method. If supported it enters fullscreen mode, for the fullscreenDiv element. Changes the visibility of the buttons to show the “Exit Fullscreen” button.If you click on the “Exit Fullscreen” button it exits fullscreen mode using document.exitFullscreen and reverts to displaying the “Enter Fullscreen” button.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Fullscreen API Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: 
              linear-gradient(45deg, #ff6b6b, #ffa07a, 
                              #87cefa, #90ee90);
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
 
        .fullscreen-button {
            background-color: #3498db;
            color: #fff;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            margin: 10px;
            border-radius: 5px;
            font-size: 16px;
        }
    </style>
</head>
 
<body>
    <h1 style="text-align:center">
          Click below button for making entire 
          page full screen
      </h1>
    <button id="enterFullscreen"
            class="fullscreen-button">
        Enter Fullscreen
      </button>
    <button id="exitFullscreen"
            class="fullscreen-button"
     style="display: none;">
          Exit Fullscreen
      </button>
 
 
    <img id="imageScreen" style="margin:auto;
                                 display:block"
        src="
https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png">
    <h3>
          Click below button to make above 
          image as full screen
      </h3>
    <button id="enterImageFullScreen"
    class="fullscreen-button">
          Enter Full Screen
      </button>
  <script>
    const enterFullscreenButton = document
.getElementById('enterFullscreen');
const exitFullscreenButton = document
.getElementById('exitFullscreen');
 
const imageFullscreen = document
    .getElementById("imageScreen")
const imageFullscreenButton = document
    .getElementById("enterImageFullScreen")
 
enterFullscreenButton.addEventListener('click', () => {
    const element = document.documentElement;
 
    if (element.requestFullscreen) {
        element.requestFullscreen();
    }
    else {
        console.log("an error occured")
    }
 
    enterFullscreenButton.style.display = 'none';
    exitFullscreenButton.style.display = 'block';
});
 
exitFullscreenButton.addEventListener('click', () => {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    exitFullscreenButton.style.display = 'none';
    enterFullscreenButton.style.display = 'block';
});
 
imageFullscreenButton.addEventListener('click', () => {
 
    if (imageFullscreen.requestFullscreen) {
        imageFullscreen.requestFullscreen();
    }
    else {
        console.log("an error occured")
    }
});
  </script>
</body>
 
</html>

Output:

Output

Example: This code creates a simple webpage with a button to toggle fullscreen mode for a specified element. It dynamically updates the status in an <h2> tag to indicate whether the page is in fullscreen or not. The fullscreenchange event is used to detect changes in fullscreen mode and adjust the display and status message accordingly.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Fullscreen API Example</title>
    <style>
        #fullscreen-element {
            width: 100%;
            height: 100%;
            background-color: lightblue;
        }
    </style>
</head>
 
<body>
    <button id="toggle-fullscreen-button">
          Toggle Fullscreen
      </button>
    <img id="imageScreen"
         style="margin:auto; display:block"
         src="
https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png">
    <div id="fullscreen-element">
        <h2 id="fullscreen-status">
              Fullscreen Status: Not in Fullscreen
          </h2>
    </div>
 
    <script>
        const toggleFullscreenButton = document
            .getElementById('toggle-fullscreen-button');
        const fullscreenElement = document
            .getElementById('fullscreen-element');
        const fullscreenStatus = document
            .getElementById('fullscreen-status'); // Added
 
        // Function to toggle fullscreen
        function toggleFullscreen() {
            if (!document.fullscreenElement) {
                // Enter fullscreen mode
                fullscreenElement.requestFullscreen().catch(err => {
                    console.error(
'Error attempting to enable fullscreen mode:', err);
                });
            } else {
                // Exit fullscreen mode
                document.exitFullscreen();
            }
        }
 
        // Event listener for the toggle button
        toggleFullscreenButton
              .addEventListener('click', toggleFullscreen);
 
        // Event listener for the fullscreenchange event
        document.addEventListener('fullscreenchange', () => {
            if (document.fullscreenElement) {
                // Entered fullscreen mode
                fullscreenStatus.textContent = 
                      'Fullscreen Status: In Fullscreen';
            } else {
                // Exited fullscreen mode
                fullscreenStatus.textContent = 
                      'Fullscreen Status: Not in Fullscreen';
            }
        });
    </script>
</body>
 
</html>