Photo by Thomas Hoang on Unsplash

Browsers have built-in fullscreen capabilities, which you can access using shortcut keys such as F11 or ⌃⌘F. But it applies to the current page as a whole, what if we want a specific element (such as a game or video) to go fullscreen?

You can do this using the Fullscreen API provided by the browser environment. Not only does it display specific elements fullscreen, but it also allows you to control the style when fullscreen.

To see an example, let’s make a simple HTML first:

<style>
  #container {
    width: 200px;
    height: 200px;
    display: grid;
    place-content: center;
    background-color: black;
  }
  #target {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style><div id="container">
  <div id="target"></div>
</div>

For comparison, I made different colors for container and target. Next, bind the listener event for target:

<script>
  const target = document.getElementById('target');
  target.addEventListener('click', (e) => {
    e.currentTarget?.requestFullscreen();
  });
</script>

Here I use currentTarget, note that it always points to the element the event is attached to:

Here is the overall demo:

Click on the red area and you can see that only the red area has entered full-screen mode. The API it uses is Element.requestFullscreen(), but it may not work in some browsers due to different implementations like mozRequestFullScreen, webkitRequestFullscreen, etc.

So to write a compatible method:

const enterFullscreen = (elem, options) => {
  return elem[
    [
      'requestFullscreen',
      'mozRequestFullScreen',
      'msRequestFullscreen',
      'webkitRequestFullscreen',
    ].find((prop) => typeof elem[prop] === 'function')
  ]?.(options);
};

This method looks up the fullscreen APIs available for the incoming element and passes options. The options object here is optional, and some of its properties control the behavior. For example, the navigationUI property can control whether to display the navigation UI in full-screen mode; Chrome v100 also added a screen property, which allows starting full screen on a specified screen.

In addition, this method will return the result of the call, because Element.requestFullscreen() will return a Promise which is resolved with a value of undefined when the transition to full screen is complete.

Next are some related APIs:

• document.exitFullscreen(): It will switch the fullscreen mode back to windowed mode. Returns a Promise which is resolved once fullscreen mode has been completely shut off.
• document.fullscreenElement/ShadowRoot.fullscreenElement: This property returns the content displayed in fullscreen mode on the current DOM (or shadow DOM), or null if there is none.
• document.fullscreenEnabled: This property returns whether you can use fullscreen mode. For example, return false when the "fullscreen" feature is not allowed or when fullscreen mode is not supported.
• Element: fullscreenchange event: This event is fired when the specified element enters or exits the fullscreen mode.
• Element: fullscreenerror event: This event is fired when an error occurs when the specified element enters or exits the fullscreen mode.

Similar to Element.requestFullscreen, we also need to use a compatible method when exiting fullscreen:

const exitFullscreen = () => {
  return document[
    [
      'exitFullscreen',
      'mozExitFullscreen',
      'msExitFullscreen',
      'webkitExitFullscreen',
    ].find((prop) => typeof document[prop] === 'function')
  ]?.();
};

</div