Hi there!
Today I studied How can I put an element into fullscreen mode and I want to share with you How do it βΊοΈ
Primarily, you should know that It works only in events, so you should use request into fullscreen mode in the event function.
So that put container into fullscreen mode use it
const d = document.querySelector("#d")
d.requestFullscreen(options)
.then(() => {})
.catch((error) => {})
You see that it is not guaranteed that the element will be put into fullscreen mode.
So, element.requestFullscreen()
returned Promise
of undefined
.
In options you can change navigationUI
param on "hide" | "show" or "auto" (default value).
First, I create a function for get fullscreen method, because fullscreen in some browsers works with prefixes only.
function goIntoFullscreen(element) {
if (element.requestFullscreen) {
return element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
return element.mozRequestFullScreen()
} else if (element.webkitRequestFullscreen) {
return element.webkitRequestFullscreen()
} else if (element.msRequestFullscreen) {
return element.msRequestFullscreen();
}
}
Next, You should exit out of fullscreen mode.
For exit out of fullscreen mode used by document.exitFullscreen
. I created a function for it with some browser prefixes too.
function outOfFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
}
After put into fullscreen will be available document.fullscreenElement
. You can check it for the button event of something else. I wrote a simple check function for it
function isFullScreenMode() {
return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
}
Funnily I created an example so that you can try live demo.
You can style your fullscreen into fullscreen mode and elements in use by :fullscreen
and ::backdrop
.
Finally, you can be listening fullscreen with fullscreenchange
and fullscreenerror
events.
Top comments (1)
Cool! It's also necessary to always remember to provide a better UX for the fullscreen mode if needed. In CSS, there's a media query:
Also, Firefox ResistFingerprinting option surely can mess up that media query, just like it messes up
prefers-color-scheme
.