JavaScript fullscreenchange Event: Tracking Fullscreen Mode Changes

The fullscreenchange event in JavaScript is triggered when an element on a web page enters or exits fullscreen mode. This event is essential for building interactive web applications that adapt to different screen modes. Understanding and properly handling this event allows developers to provide a seamless experience as users switch between standard and fullscreen views. This article provides a comprehensive guide on how to use the fullscreenchange event effectively.

What is the fullscreenchange Event?

The fullscreenchange event is fired on the document when an element that is in fullscreen mode changes its state. This can happen when the element enters fullscreen, exits fullscreen, or when the user cancels the fullscreen request. Unlike specific element events, this event is global and provides a mechanism to track when any element on the page changes its fullscreen state.

Purpose of the fullscreenchange Event

The primary purpose of this event is to:

• Detect Fullscreen Changes: Allow applications to react to changes in fullscreen status.
• Adapt User Interfaces: Dynamically adjust the user interface when an element goes fullscreen or returns to normal view.
• Enhance User Experience: Provide a more immersive and engaging experience, especially for media or game content.
• Manage Resource Usage: Optimize resource consumption based on fullscreen or normal mode.

Syntax and Usage

The fullscreenchange event is attached to the document and is not specific to any HTML element. It is commonly used in conjunction with requestFullscreen() and other related methods.

document.addEventListener('fullscreenchange', function(event) {
  // Event handler logic here
});

The event handler function receives an event object with several properties, but the most relevant one is the document.fullscreenElement property, which provides a reference to the element currently in fullscreen mode or null when no element is in fullscreen.

Key Properties

The event object passed to the fullscreenchange event handler has the following useful properties:

Property	Type	Description
`target`	Element	The `document` on which the event fired.
`type`	String	The string `”fullscreenchange”` indicating the type of event.
`timeStamp`	Number	The time in milliseconds when the event was created.
`document.fullscreenElement`	Element | null	The element currently displayed in fullscreen mode, or `null` if no element is in fullscreen mode.
`document.fullscreenEnabled`	Boolean	Indicates whether the fullscreen API is supported and enabled.

Note: The fullscreenchange event is triggered whenever an element enters or exits fullscreen mode, including when fullscreen requests are canceled by the user. 💡

Basic Examples

Let’s explore some examples to better understand how to use the fullscreenchange event.

Example 1: Simple Fullscreen Toggle

This example shows how to toggle fullscreen mode on a button click and log the state change using the fullscreenchange event.

<button id="fullscreenButton1">Toggle Fullscreen</button>
<div id="fullscreenDiv1" style="border: 1px solid black; padding: 20px; height: 150px;">
  This is a div that can go fullscreen.
</div>
<div id="fullscreenLog1"></div>

<script>
  const fullscreenButton1 = document.getElementById('fullscreenButton1');
  const fullscreenDiv1 = document.getElementById('fullscreenDiv1');
  const fullscreenLog1 = document.getElementById('fullscreenLog1');

  fullscreenButton1.addEventListener('click', () => {
      if (document.fullscreenElement) {
          document.exitFullscreen();
      } else {
          fullscreenDiv1.requestFullscreen();
      }
  });

  document.addEventListener('fullscreenchange', () => {
    if(document.fullscreenElement){
        fullscreenLog1.innerHTML = "Fullscreen is active on: " + document.fullscreenElement.tagName;
    } else {
       fullscreenLog1.innerHTML = "Fullscreen is now disabled";
    }
  });
</script>

Output:

• Initially, the div is in normal view.
• Clicking the “Toggle Fullscreen” button makes the div go fullscreen. The log div shows: “Fullscreen is active on: DIV”.
• Clicking the “Toggle Fullscreen” button again exits the fullscreen mode. The log div shows: “Fullscreen is now disabled”

Example 2: Adapting UI on Fullscreen Change

This example demonstrates how to change the background color of an element when it enters fullscreen mode and revert it when it exits.

<button id="fullscreenButton2">Toggle Fullscreen</button>
<div id="fullscreenDiv2" style="border: 1px solid black; padding: 20px; height: 150px; background-color: lightgray;">
  This is a div that changes its background color on fullscreen.
</div>

<script>
  const fullscreenButton2 = document.getElementById('fullscreenButton2');
  const fullscreenDiv2 = document.getElementById('fullscreenDiv2');

  fullscreenButton2.addEventListener('click', () => {
      if (document.fullscreenElement) {
          document.exitFullscreen();
      } else {
        fullscreenDiv2.requestFullscreen();
      }
  });

  document.addEventListener('fullscreenchange', () => {
    if(document.fullscreenElement) {
      fullscreenDiv2.style.backgroundColor = 'lightblue';
    } else {
      fullscreenDiv2.style.backgroundColor = 'lightgray';
    }
  });
</script>

Output:

• Initially, the div has a lightgray background.
• Clicking the button will make the div go fullscreen, and its background will become lightblue.
• Exiting fullscreen will change the background back to lightgray.

Example 3: Fullscreen Video Player

This example illustrates the use of fullscreenchange in a video player to toggle custom controls and handle full-screen changes.

<video id="myVideo" width="320" height="240" controls>
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<button id="fullscreenButton3">Toggle Fullscreen</button>
<div id="fullscreenLog3"></div>

<script>
  const myVideo = document.getElementById('myVideo');
  const fullscreenButton3 = document.getElementById('fullscreenButton3');
  const fullscreenLog3 = document.getElementById('fullscreenLog3');

    fullscreenButton3.addEventListener('click', () => {
        if (document.fullscreenElement) {
            document.exitFullscreen();
        } else {
          myVideo.requestFullscreen();
        }
    });

  document.addEventListener('fullscreenchange', () => {
     if(document.fullscreenElement) {
      fullscreenLog3.innerHTML = "Video is in Fullscreen mode";
    } else {
      fullscreenLog3.innerHTML = "Video is in normal mode";
    }
  });
</script>

Output:

• Initially, the video is in normal mode.
• Clicking the “Toggle Fullscreen” button will make the video go fullscreen, and the log will display: “Video is in Fullscreen mode”.
• Exiting fullscreen will change the log to: “Video is in normal mode”.

Advanced Usage

Using document.fullscreenEnabled

The document.fullscreenEnabled property is crucial to check if the Fullscreen API is supported by the browser. This ensures that your code doesn’t attempt to use methods that aren’t available.

  if (document.fullscreenEnabled) {
    console.log("Fullscreen API is supported.");
  } else {
    console.log("Fullscreen API is not supported.");
  }

Handling Browser Compatibility

Different browsers might have prefixes for the Fullscreen API. It’s recommended to include fallbacks to support various browsers.

function requestFullScreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) { /* Firefox */
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { /* IE/Edge */
    element.msRequestFullscreen();
  }
};

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

function toggleFullScreen(element) {
    if (document.fullscreenElement) {
        exitFullscreen();
    } else {
        requestFullScreen(element);
    }
}

// Use the functions as follow:
document.getElementById('myButton').addEventListener('click', ()=> {
  toggleFullScreen(document.getElementById('myElement'));
})

Real-World Applications

The fullscreenchange event is critical for applications such as:

• Media Players: To provide a seamless fullscreen experience for videos.
• Gaming: To enhance immersion and adapt the game interface to the fullscreen view.
• Presentations: To create an immersive environment for slideshows and presentations.
• Data Visualizations: To display charts, graphs, and dashboards in an easily viewable fullscreen format.

Browser Compatibility

The fullscreenchange event has excellent support across all modern browsers, making it reliable for cross-browser development.

Note: Always test on various browsers and devices to ensure compatibility and a smooth user experience. 🧐

Conclusion

The JavaScript fullscreenchange event is a crucial tool for any web developer looking to build interactive and immersive web experiences. By effectively using this event, developers can create dynamic UIs, manage content efficiently, and provide a superior user experience across various screen modes. Whether you are developing a video player, a game, or a presentation tool, mastering the fullscreenchange event will significantly enhance your web applications.