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…


This content originally appeared on DEV Community and was authored by Bruno Noriller

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


This content originally appeared on DEV Community and was authored by Bruno Noriller


Print Share Comment Cite Upload Translate Updates
APA

Bruno Noriller | Sciencx (2021-11-14T23:28:24+00:00) The Fullscreen API. Retrieved from https://www.scien.cx/2021/11/14/the-fullscreen-api/

MLA
" » The Fullscreen API." Bruno Noriller | Sciencx - Sunday November 14, 2021, https://www.scien.cx/2021/11/14/the-fullscreen-api/
HARVARD
Bruno Noriller | Sciencx Sunday November 14, 2021 » The Fullscreen API., viewed ,<https://www.scien.cx/2021/11/14/the-fullscreen-api/>
VANCOUVER
Bruno Noriller | Sciencx - » The Fullscreen API. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/14/the-fullscreen-api/
CHICAGO
" » The Fullscreen API." Bruno Noriller | Sciencx - Accessed . https://www.scien.cx/2021/11/14/the-fullscreen-api/
IEEE
" » The Fullscreen API." Bruno Noriller | Sciencx [Online]. Available: https://www.scien.cx/2021/11/14/the-fullscreen-api/. [Accessed: ]
rf:citation
» The Fullscreen API | Bruno Noriller | Sciencx | https://www.scien.cx/2021/11/14/the-fullscreen-api/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts