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.

Cover Photo by John Schnobrich on Unsplash