DEV Community

Phong Duong
Phong Duong

Posted on • Originally published at phongduong.dev on

Toggle fullscreen mode with Fullscreen API

Fullscreen API allows you to represent your application on the full screen. You can use it for your video player or game.

In this tutorial, we want to present the page in the full-screen mode by clicking turn on button

<h1>Fullscreen API</h1>
<button id="on">Turn on fullscreen</button>
<button id="off">Turn off fullscreen</button>
Enter fullscreen mode Exit fullscreen mode

Check the mode is supported

First, you need to check whether the full-screen mode is supported first

const fullscreenSupported = document.fullscreenEnabled;
Enter fullscreen mode Exit fullscreen mode

It returns false if your browser doesn't support the full-screen mode or fullscreen feature is not allowed.

If the full-screen mode is not supported, you should show a notification for the user

if (!fullscreenSupported) {
    const para = document.createElement("p");
    para.textContent = "Full screen mode is not supported";
    document.body.appendChild(para);
    onButton.style.display = "none";
    offButton.style.display = "none";
}
Enter fullscreen mode Exit fullscreen mode

Get the current fullscreen element

You can present any element in full-screen mode. To get the current element that is being represented in full-screen, you call fullscreenElement property of document

document.fullscreenElement
Enter fullscreen mode Exit fullscreen mode

It returns null, if the document is not in full-screen mode

Turn on full-screen mode

You listen to the click event in the turn on button. In the event handler, you call requestFullscreen() of the element that you want present. It will return a Promise which is resolved after the full-screen mode is turned on. You need to check if the full-screen mode is supported and the mode is off.

const onButton = document.getElementById("on");

onButton.addEventListener("click", () => {
    if (fullscreenSupported && !document.fullscreenElement) {
        document.documentElement.requestFullscreen();
    }
});
Enter fullscreen mode Exit fullscreen mode

Turn off full-screen mode

To turn off the full-screen mode, you listen to the click event of the turn off button. In the event handler, you call the exitFullscreen() method of document. It returns a Promise that is resolved after the mode is off. You need to check whether the mode is supported and the mode is on.

const offButton = document.getElementById("off");

offButton.addEventListener("click", () => {
    if (fullscreenSupported && document.fullscreenElement) {
        document.exitFullscreen()
    }
});

Enter fullscreen mode Exit fullscreen mode

This is the Codepen demo for the tutorial

Top comments (0)