Element.exitFullscreen() Method

The Element.exitFullscreen() method is a crucial part of web development that allows developers to programmatically exit fullscreen mode for elements that are currently displayed in fullscreen. This method is part of the Fullscreen API, which enables websites to present content in a more immersive manner, enhancing user experience, especially for videos, games, and presentations. In this article, we will cover everything a complete beginner needs to know about the exitFullscreen() method, from its purpose and syntax to practical examples and browser support.

I. Introduction

A. The exitFullscreen() Method is used to exit an element that is currently in fullscreen mode.

B. The purpose of this method is to provide a way for developers to bring the user back to a non-fullscreen view, thereby giving users control over their browsing experience.

II. Browser Support

A. The Element.exitFullscreen() method is widely supported across modern browsers, but it’s essential to verify compatibility when developing web apps.

Browser	Supported Version
Google Chrome	Full support
Mozilla Firefox	Full support
Safari	Full support
Edge	Full support
Internet Explorer	No support

III. Syntax

A. The syntax for the exitFullscreen() method is straightforward:

document.exitFullscreen();

B. This method does not take any parameters, making it easy to call when necessary.

IV. Description

A. The functionality of exitFullscreen() is to switch the browser view back from fullscreen to windowed mode.

B. It is often used in conjunction with actions like a button click that allows users to exit fullscreen when they have finished viewing content or when they need to return to normal browsing.

V. Examples

A. Here’s a basic example of how to use exitFullscreen():

<button id="exitFullscreenBtn">Exit Fullscreen</button>

<script>
  const exitBtn = document.getElementById('exitFullscreenBtn');
  
  exitBtn.addEventListener('click', function() {
      if (document.fullscreenElement) {
          document.exitFullscreen();
      }
  });
</script>

B. Let’s consider a practical application, such as a video player that allows users to enter and exit fullscreen mode:

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<button id="fullscreenBtn">Go Fullscreen</button>
<button id="exitFullscreenBtn">Exit Fullscreen</button>

<script>
const video = document.getElementById('myVideo');
const fullscreenBtn = document.getElementById('fullscreenBtn');
const exitFullscreenBtn = document.getElementById('exitFullscreenBtn');

fullscreenBtn.onclick = () => {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  }
};

exitFullscreenBtn.onclick = () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  }
};
</script>

VI. Related Methods

A. To compare, the related Element.requestFullscreen() method allows elements to enter a fullscreen state. This is essential for immersive content.

B. An overview of related functionalities includes:

Method	Description
requestFullscreen()	Enables an element to enter fullscreen mode.
fullscreenchange	Event triggered when the fullscreen state changes.

VII. Conclusion

A. In summary, the Element.exitFullscreen() method allows developers to easily create interactive and user-friendly web applications by enabling and disabling fullscreen features.

B. Mastering the exitFullscreen() method is significant for enhancing web experiences, especially in multimedia applications. By understanding how to control fullscreen behavior, developers can create more engaging and visually impactful websites.

FAQ

Q: What happens if I call exitFullscreen() when no element is in fullscreen?
A: Calling exitFullscreen() when no element is currently in fullscreen will have no effect and will not throw an error.

Q: Can I customize the exit fullscreen event?
A: Yes, you can listen for the fullscreenchange event to customize behavior when exiting fullscreen.

Q: Is exitFullscreen() available on all HTML elements?
A: The method can be called on the document object to exit fullscreen for any element that has been placed in fullscreen mode.

Q: Do I need to prefix exitFullscreen() for older browsers?
A: In some older browsers, a prefixed version like document.webkitExitFullscreen() may be required, but most modern browsers do not need any prefixes.