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...
You can never go wrong just going to the documentation.
You call from an
element, and always exit from the
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.
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.
document.onfullscreenchange = () => console.log("Hey! I'm toggling!")
Funny thing about those two:
- the default
F11for fullscreen and clicking the default HTML5 video player don't trigger the
F11to exit fullscreen will trigger it if it entered fullscreen with
- after the default
document.fullscreenElementwill give you
- but will give you the video element when you click the default fullscreen button.
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.