How to enter full-screen mode in browser using JS
Tags: javascript, programming
Published: 2021-10-01 03:09:49

### 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.

{% codepen https://codepen.io/Leoschmittk/pen/gOREOpJ %}

* 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:


```html

 <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.

```javascript
 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](https://caniuse.com/?search=requestFullscreen).
- 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 👋 👋 👋 👋