Toggle Fullscreen Mode On Click With Javascript

Hello everyone. For today’s tutorial, we are going to create a fullscreen toggle. So what is a fullscreen toggle? A fullscreen toggle basically is a button that allows you to switch between fullscreen and windowed mode. A fullscreen mode can allow the user undistracted attention to the current page. You would find this type of toggle on a gaming site where the user can easily switch the game to full-screen mode and play the game distraction-free.
For this tutorial, we will be using the Fullscreen API. But before we move forward with our tutorial make sure to check out the browser support for the Fullscreen API here.

Video Tutorial:

If you would like to code along with me, you can try this video tutorial.

HTML:

We start our code by creating an HTML file with the name ‘index.html’. For our HTML code, we just need a button with the id ‘btn’. You can copy the code below to your HTML file.

<h1>Fullscreen Toggle</h1>
<button id="btn">Go Fullscreen</button>

CSS:

Next, create a stylesheet with the name ‘style.css’. Paste the code below to the newly created stylesheet. You can totally skip this CSS file as it in no way affects the functionality. Alternatively, you can add your custom styles.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins",sans-serif;
}
h1{
    width: 95%;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    font-size: 9.5vmin;
    text-align: center;
}
#btn{
    padding: 20px;
    margin: 20px;
    background-color: #FE0067;
    border: none;
    color: #ffffff;
    border-radius: 5px;
    cursor: pointer;
}

Other Tutorial You Might Like:

• Image Comparison Slider
• Hide Arrows From Input Numbers
• Glassmorphism Form UI
• Highlight Searched Text

Javascript:

Now for adding functionality to this button, we create a javascript file called – ‘script.js’. The two important methods used here are:

• Element.requestFullscreen() – Makes the element to be displayed in the fullscreen mode.
• Element.exitFullscreen() – Take off the fullscreen mode applied to an element.

let myDocument = document.documentElement;
let btn = document.getElementById("btn");

btn.addEventListener("click", ()=>{
    if(btn.textContent == "Go Fullscreen"){
        if (myDocument.requestFullscreen) {
            myDocument.requestFullscreen();
        } 
        else if (myDocument.msRequestFullscreen) {
            myDocument.msRequestFullscreen();
        } 
        else if (myDocument.mozRequestFullScreen) {
            myDocument.mozRequestFullScreen();
        }
        else if(myDocument.webkitRequestFullscreen) {
            myDocument.webkitRequestFullscreen();
        }
        btn.textContent = "Exit Fullscreen";
    }
    else{
        if(document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if(document.msexitFullscreen) {
            document.msexitFullscreen();
        }
        else if(document.mozexitFullscreen) {
            document.mozexitFullscreen();
        }
        else if(document.webkitexitFullscreen) {
            document.webkitexitFullscreen();
        }

        btn.textContent = "Go Fullscreen";
    }
});

You have a fullscreen toggle ready. That’s it for this tutorial. Comment below any suggestions and feedback. You can go ahead and watch the video tutorial. Or you can simply download the code by clicking on the download button below. Stay tuned for more such content.