DEV Community

Cover image for The Fullscreen API
Bruno Noriller
Bruno Noriller

Posted on • Originally published at Medium

12 1

The Fullscreen API

This will be a weird one for many people. (What a great way to start a post!)

The Fullscreen API... I've been working heavily on the front end for at least 4 years and had never used it.
Not that it was a problem... after all I just never had the need to use it.

So, when the time came, I've believed that it was beyond me to do a Youtube or Netflix clone because "how do they make the controls?"

And when you learn "the secret" it's so obvious it makes you feel stupid...

BTW: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

You can never go wrong just going to the documentation.

The two main methods

  • Element.requestFullscreen()
  • document.exitFullscreen()

That's it!

You call from an element, and always exit from the document.

This means, any element you have... lets say a overlay with buttons and sliders and a video behind it... all of that just goes together to fullscreen. It's that simple.

The two additional methods

  • document.fullscreenElement
  • document.onfullscreenchange

document.fullscreenElement will give either null or the element that is currently in fullscreen.

So, if for any reason you need to know if it's in fullscreen, you use that.

document.onfullscreenchange is null by default, so you need to save a function in it.

ex: document.onfullscreenchange = () => console.log("Hey! I'm toggling!")

Stuff to consider

Funny thing about those two:

  • the default F11 for fullscreen and clicking the default HTML5 video player don't trigger the onfullscreenchange.
    • the Esc or F11 to exit fullscreen will trigger it if it entered fullscreen with requestFullscreen()
  • after the default F11 for fullscreen, document.fullscreenElement will give you null
    • but will give you the video element when you click the default fullscreen button.

There is more to it...

Even a simple API like fullscreen still have a lot more to it than just what I've put here.

But for today, this will do.


buy me a coffee

Cover Photo by John Schnobrich on Unsplash

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay