Sling Academy
Home/JavaScript/Enter and Exit Fullscreen Mode Using the Fullscreen API in JavaScript

Enter and Exit Fullscreen Mode Using the Fullscreen API in JavaScript

Last updated: December 12, 2024

The Fullscreen API in JavaScript is a powerful tool that enables you to control an element's display in fullscreen mode, which can greatly enhance user experience in web applications. Particularly useful for video players, image galleries, and interactive web games, the Fullscreen API is straightforward to use with both basic and advanced functionalities.

Understanding the Fullscreen API

The Fullscreen API provides two main methods:

  • requestFullscreen(): This method allows an element to be presented in fullscreen. It must be initiated by a user gesture, like a mouse click or a keypress.
  • exitFullscreen(): This method exits fullscreen mode and returns to the previous view state.

Entering Fullscreen Mode

To integrate fullscreen functionality, first, identify the element you wish to display in fullscreen mode. Here's how it can be done in practice using JavaScript:

document.getElementById('fullscreenButton').addEventListener('click', function() {
  const elem = document.getElementById('myElement');
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { // Firefox
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { // Chrome, Safari and Opera
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { // IE/Edge
    elem.msRequestFullscreen();
  }
});

In this code example, an event listener is attached to a button with the ID fullscreenButton. When clicked, it attempts to enter fullscreen mode on the element with the ID myElement using the requestFullscreen() method. This takes into consideration cross-browser compatibility for various browsers.

Exiting Fullscreen Mode

Exiting fullscreen mode is just as simple. Here’s how to implement it:

document.getElementById('exitFullscreenButton').addEventListener('click', function() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { // Firefox
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { // IE/Edge
    document.msExitFullscreen();
  }
});

Similar to entering fullscreen, this script uses an event listener on an exitFullscreenButton to handle exiting fullscreen using the exitFullscreen() method with browser-specific prefixes catered for older browsers.

Detecting Fullscreen Changes

It's also important to detect changes to fullscreen mode states, which can be achieved using the fullscreenchange event.

document.addEventListener("fullscreenchange", function() {
  console.log("Fullscreen: " + (document.fullscreenElement ? "Entering" : "Exiting"));
});

This event logs changes to the console each time the fullscreen mode is toggled, indicating whether the webpage is entering or exiting fullscreen.

Applying Style Adjustments

CSS adjustments can be applied to even further enhance the experience when any element goes into fullscreen mode. Here’s a simple example using CSS:

#myElement:-webkit-full-screen { /* Safari */
  width: 100%;
  height: 100%;
}

#myElement:-moz-full-screen { /* Firefox */
  width: 100%;
  height: 100%;
}

#myElement:-ms-fullscreen { /* IE */
  width: 100%;
  height: 100%;
}

#myElement:fullscreen {
  width: 100%;
  height: 100%;
}

This CSS ensures that the fullscreen element utilizes the maximum possible display size irrespective of the browser.

Conclusion

The Fullscreen API is not only easy to implement but also greatly enhances user interactivity and experience. While using this API, always ensure appropriate user-driven events trigger the request for fullscreen, and consider accessibility and UX guidelines.

Next Article: Optimize Media Viewing with JavaScript Fullscreen Control

Previous Article: Organize Files and Folders with the JavaScript File and Directory Entries API

Series: Web APIs – JavaScript Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration