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>

Check the mode is supported

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

const fullscreenSupported = document.fullscreenEnabled;

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";
}

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

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();
    }
});

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()
    }
});

This is the Codepen demo for the tutorial