JavaScript: Press ESC to exit fullscreen mode (2 examples)

Creating an immersive user experience often involves using the full screen capabilities of browsers. This can lead to enhanced engagement and a more focused environment for users. However, it’s crucial to allow users an easy escape route from this immersive experience. The Escape (ESC) key is a universal symbol of exit or cancellation in user interfaces, making it a natural choice for exiting fullscreen mode. In this guide, we will explore how to use JavaScript to enable exiting fullscreen mode with the ESC key, providing two examples that range from basic to advanced usage.

Understanding Fullscreen API

Before diving into the examples, let’s understand the Fullscreen API. It allows web content to be presented in fullscreen mode, eliminating all browser UI and other distractions. This API is subject to changes and browser compatibility issues, so always refer to the latest documentation. The essential methods are requestFullscreen() for entering fullscreen and exitFullscreen() for exiting. User consent is required to enter fullscreen, usually done via a button or specific user action.

Basic Implementation

In our first example, we’ll keep it simple. Our aim is to enter fullscreen mode upon a click event, and then allow users to exit by pressing the ESC key.

document.addEventListener('click', function () {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});

document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape' && document.fullscreenElement) {
    document.exitFullscreen();
  }
});

This example covers the basics of toggling fullscreen mode on user interactions. Clicking anywhere on the page will trigger fullscreen, and pressing ESC will exit.

Advanced Implementation

As we move to a more advanced example, let’s integrate fullscreen functionality into a specific element (like a video player) and provide visual feedback.

const fsButton = document.getElementById('fsButton');
const videoPlayer = document.getElementById('videoPlayer');

fsButton.addEventListener('click', function () {
  if (!document.fullscreenElement) {
    videoPlayer.requestFullscreen();
  }else{
    document.exitFullscreen();
  }
});

document.addEventListener('fullscreenchange', function () {
  if (!document.fullscreenElement) {
    fsButton.innerHTML = 'Enter Fullscreen';
  } else {
    fsButton.innerHTML = 'Exit Fullscreen';
  }
});

document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape' && document.fullscreenElement) {
    document.exitFullscreen();
    fsButton.innerHTML = 'Enter Fullscreen';
  }
});

This use case demonstrates a more complex scenario: a video player that users can switch to fullscreen mode by clicking a dedicated button. Exiting fullscreen with the ESC key automatically updates the button’s label, offering a clear user interface cue.

Handling Browser Compatibility

Understanding that different browsers have their own implementations of the Fullscreen API, your code might need additional handling for browser compatibility. Always check and test your code across the major browsers to ensure a consistent user experience.

Conclusion

Allowing users to exit fullscreen mode with the ESC key is pivotal in providing a user-friendly and accessible interface. This guide demonstrated how simple JavaScript can enhance your site’s engagement by leveraging the ESC key within the Fullscreen API. Starting with a basic concept and moving to a more advanced implementation offers flexibility in enhancing web projects. Remember, the key to a seamless user experience lies in the balance between immersion and ease of exit.