How to enter full-screen mode in browser using JS

Hi there!

📌 Today, I'll show a straightforward way to enter and exit fullscreen mode on main browsers. I'll try to explain as much as I can, so introducing a subtle pace. You can open the pen below on Codepen and check by yourself.

• There is also the fullscreen related to the video HTML element, which will be properly covered.

Step 1

To get started, we'll just need to create a HTML file and add the following code:

 <button onclick="fsManager.checkForFullscreen()">
         Enter fullscreen
 </button>

That is, a simple button element that will execute the checkForFullscreen() function wherever the user clicks on it.

Step 2

To do the magic wanted we need JavaScript. The whole script is down below.

 class fullScreenManager {
            #isFullscreen = false;
            #docEl = document.documentElement;

            checkForFullscreen() {
               this.isFullscreen = !this.isFullscreen;

               if (this.isFullscreen) {
                  this.enterFullscreen();
               } else {
                  this.exitFullscreen();
               }
            }

            enterFullscreen() {
               this.#docEl.requestFullscreen() ||
                  this.#docEl.webkitRequestFullscreen() ||
                  this.#docEl.msRequestFullscreen();
            }
            exitFullscreen() {
               document.exitFullscreen() ||
                  document.webkitExitFullscreen() ||
                  document.msExitFullscreen();
            }
         }
         const fsManager = new fullScreenManager();

Here what's going on:

• we create a class called fullscreenManager. Within it there are two private variables: isFullscreen and docEl
• The first carries a false value because initially the fullscreen isn't enabled.
• The second is just a streamline name to refer to document.documentElement, that is, the HTML element in itself.
• There is the checkForFullscreen method that is used to check wheter the fullscreen is enabled or not. If it is, execute enterFullscreen(). If not, execute exitFullscreen(). Moreover, the variable that's responsible for carry the state (false or true) of the screen has to change to the opposite value. If it's not opened yet (if it's false) then turn it to true, and vice-versa, logic shown in this.isFullscreen = !this.isFullscreen
• To be able to open the fullscreen, we can call three methods that do the same, all of them associated with the docEl variable. Depending on the user's browser, certain methods don't work out due to its browser engine. To solve that, the logic is basically checking if the given browser "accepts" requestFullscreen, or webkitRequestFullscreen or even msRequestFullscreen. To do that I'm using the || logic operator. One of them has to work in almost every browser, something that you can easily check over here.
• On the other hand, if the user presses again the button, isFullscreen turns to false and the exitFullscreen is executed pretty much the same way as the enterFullscreen by using the methods to exit the fullscreen. In fact, to exit we're using the document instead of document.documentElement
• To wrap it up, we declare a global varible called fsManager and attach to it a new instance of the fullscreenManager class, allowing us to call its methods, like we did in the HTML button.

Video element

If you want to make the same functionality but for associating it with videos, the methods used are the same, but since you're dealing with the video element, don't use document or document.documentElement. Rather, there should be something like document.querySelector('.video-class-example').requestFullscreen() and so on.

Wrap up

But that's all, anyway. I hope you enjoyed as much I did writing this out.

If you happen to have any suggestion, I'll be pleased to modify the code for the better.

Farewell 👋 👋 👋 👋