Why the Fullscreen API Can Improve Your Website’s UX

Find out how the Fullscreen API can transform your website’s user experience by enabling immersive, full-screen media viewing.

Picture by BoliviaInteligente

Video screens have become an essential part of our lives over the past 20 years.

With the rise of social media, we spend more time looking at screens now than we ever did when the first TVs were commercialized.

Smartphones, laptops, TVs… we have all these enormous screens we use to consume video products and not only, but sometimes we don't get the most out of them simply because there are screen parts covered with controls, additional information and often unimportant visual elements.

Particularly on Web pages, we often want to focus on the core important part of the screen, such as a video player, or an image gallery.

Fullscreen API to go fullscreen!

The Fullscreen API is a well-supported browser API that allows you to programmatically bring into fullscreen mode any DOM element on your web page, independently from what kind of element it is: might be a video player, an image gallery or a code snippet, this API can conquer the whole screen and make focus the attention on what you want.

This API mainly consists of:

• Element.requestFullscreen() brings the HTML element it is used on into fullscreen mode, removing any browser topbar, bottom bar or irrelevant element covering the target node element. It returns a Promise which is resolved once fullscreen mode has been activated.
• Document.exitFullscreen() in contrast with .requestFullscreen(), it lets shut down the fullscreen mode on the document and returns a Promise that resolves once the process is complete. In case the method is used when not in fullscreen mode, the Promise will be rejected.
• Document.fullscreenElement tells you about the element currently in fullscreen mode. If the document is not fullscreen, it will just return null.

These 3 basic utilities from the Fullscreen API already enable tons of opportunities to make your app more focused on what matters.

The simplest and most powerful use case is to have a utility that allows you to toggle the fullscreen mode on any element.

Simple fullscreen toggle feature

Let's create a utility function that, given a query selector, toggles its fullscreen visibility.

function toggleFullScreen(selector: string) {
  if (!document.fullscreenElement) {
    document.querySelector(selector)?.requestFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

toggleFullScreen('video');
toggleFullScreen('#my-video-player');

As simple as it looks, we can already toggle any Element with this simple utility function.

Observe fullscreen mode changes

What if we need to observe changes between fullscreen and a normal page rendering?

As you can expect from any browser API when we invoke fullscreen mode on an element, we leave it or we get an error, events are triggered and we can observe them to react accordingly!

document.querySelector('video').addEventListener('fullscreenchange', _event => {
  if (document.fullscreenElement) {
    console.log('You video is now fullscreen!');
  } else {
    console.log('Leaving fullscreen mode.');
  }
});

document.querySelector('video').addEventListener('fullscreenerror', _event => {
  console.log('An error occurred while switching into fullscreen mode...');
});

Wrapping up

This API is supported by all modern browsers and being a native API you can use it to create utilities anywhere in your web app independently from which framework/library you use!

Let me know of any other use you can think of, cheers 👋

Last updated: Mon Sep 16 2024