Make A FullScreen Button with JavaScript (for Video and Different HTML Components)

On this tutorial, you’ll discover ways to make a component enter fullscreen mode in any browser utilizing the JavaScript FullScreen API.

“The Fullscreen API provides strategies to current a selected aspect and its descendants in fullscreen mode, and to exit fullscreen mode as soon as it’s not wanted” – MDN

Fullscreen mode removes all different components on display screen (akin to a browser navigation bar or a desktop dock) and fills accessible display screen actual property with the chosen aspect. A typical instance is when sharing a presentation or watching a video in fullscreen.

One benefit of fullscreen mode is that it permits the person to focus solely on the aspect being considered with out being distracted by different components onscreen. The FullScreen API additionally makes use of the system default behaviour so we are able to make the most of some inbuilt options with out having to write down extra code, akin to urgent the Esc key to shut fullscreen.

1. Markup with HTML

For our markup, we’ll be utilizing a video aspect and a button aspect for our fullscreen toggle.

Since we’re utilizing a customized fullscreen button for our video aspect, we’ll want to show off the default controls on the video aspect (to not fear, we are able to all the time get the controls again as soon as the fullscreen mode is activated). We will do that by not together with the controls attribute in our video tag.

That is what our markup appears to be like like:

1

<most important>

2

  <video id="video" autoplay loop muted>

3

    <supply id='mp4' src="video-src.mp4" kind='video/mp4' />

4

  </video>

5

6

  <button 

7

    class="full-screen" 

8

    title="Enter fullscreen mode"

9

    aria-label="Enter fullscreen mode"

10

  >

11

  </button>

12

</most important>

2. Styling with CSS

We’ll model the full-screen button to be positioned in the midst of the video container. 

1

most important {

2

  place: relative;

3

  top: auto;

4

}

5

6

video {

7

  min-height: 100vh;

8

  max-width: 100%;

9

  width: 100%;

10

  top: auto;

11

  padding: 0;

12

}

13

14

.full-screen {

15

  transition: 150ms;

16

  place: absolute;

17

  prime: 0;

18

  backside: 0;

19

  proper: 0;

20

  left: 0;

21

  margin: auto;

22

  top: fit-content;

23

  width: fit-content;

24

  background-color: rgba(255, 255, 255, 0.5);

25

  border-color: clear;

26

  border-radius: 50%;

27

  padding: 16px;

28

  show: flex;

29

  justify-content: middle;

30

  align-items: middle;

31

  define: none;

32

  cursor: pointer;

33

}

34

35

.full-screen:hover {

36

  background-color: rgba(255, 255, 255, 1);

37

}

We will additionally use the CSS media question hover to find out how the button ought to behave on hover units (e.g. laptops) vs. contact units (e.g. cellphones). On this demo, we’ll set the button so it’s all the time seen on contact units, and solely seen when hovered over on hover units.

1

@media (hover: hover) {

2

  .full-screen {

3

    opacity: 0;

4

  }

5

6

  most important:hover .full-screen {

7

    opacity: 1;

8

  }

9

}

3. FullScreen Performance

Now we’ve our structure and styling accomplished, we are able to get began on the performance utilizing JavaScript.

We’ll retailer the weather to be focused as world variables.

1

const video = doc.getElementById("video");

2

const fullscreenButton = doc.querySelector(".full-screen");

Utilizing an occasion listener, we’ll look out for when the fullscreen button has been clicked and make a name to the FullScreen API. This may be accomplished utilizing the .requestFullScreen() technique straight on the aspect to be made fullscreen.

1

fullscreenButton.addEventListener("click on", operate () {

2

  video.requestFullscreen();

3

});

FullScreen Assist on iOS

For iOS units, we require a distinct technique so we’ll must replace our operate to take that under consideration.

1

fullscreenButton.addEventListener("click on", operate () {

2

  if (video.webkitSupportsFullscreen) {

3

    video.webkitEnterFullscreen();

4

    return;

5

  }

6

7

  video.requestFullscreen();

8

});

Since we’ll not have entry to the toggle button when the video is in fullscreen mode, we’ll want one other technique of making certain the person can exit the complete display screen view. Fortunately, the HTML5 video default controls embody a fullscreen toggle so we are able to use this to our profit by exhibiting the video controls as soon as fullscreen mode is lively. We’ll see how to try this within the subsequent part.

FullScreen Occasion Listener

There’s a selected occasion listener for detecting when the browser enters or leaves fullscreen mode. We will detect the fullscreen mode toggle with the fullscreenchange occasion listener and likewise detect if the browser is at the moment in fullscreen mode with the fullscreenElement property. The property returns the precise aspect at the moment in fullscreen view or returns null if no aspect is discovered.

Utilizing these two properties, we are able to make adjustments to our components primarily based on in the event that they’re in fullscreen mode or not.

On this demo, we’ll be including the default controls to the video as soon as it’s in fullscreen mode and eradicating them when it’s not in fullscreen mode utilizing the setAttribute and removeAttribute strategies. 

1

doc.addEventListener("fullscreenchange", operate () {

2

  if (doc.fullscreenElement) {

3

    video.setAttribute("controls", true);

4

    return;

5

  }

6

7

  video.removeAttribute("controls");

8

});

Styling FullScreen Components

There are additionally CSS selectors for styling components when in fullscreen mode. The :fullscreen selector can be utilized to model components when fullscreen mode is lively and the ::backdrop pseudo-selector can be utilized to model the background of the fullscreen mode.

These selectors are utilized by the browser to use default styling to the fullscreen mode.

5. Utilizing FullScreenAPI on Non-Video Components

At the beginning of this tutorial, I discussed that the FullScreen API is simply totally supported on video components for iOS units. Now we’ll check out a non-cross-browser compliant technique of utilizing the FullScreen API on different components.

On this demo, we’ll be calling the FullScreen API on a carousel we beforehand created in one other tutorial.

Right here’s the brand new demo (bigger model on CodePen). Keep in mind, this implementation gained’t work on an iPhone.

We’ll be utilizing the structure from the carousel tutorial and including a fullscreen button. We’ll even be utilizing SVG icons to toggle the button show relying on if fullscreen mode is lively or not.

That is what our markup appears to be like like:

1

<part class="slider-wrapper" id="wrapper">

2

3

  <button class="full-screen" title="Enter full display screen mode">

4

    <svg class="full-screen--open"></svg>

5

6

    <svg class="full-screen--close"></svg>

7

  </button>

8

9

  <ul class="slides-container" id="slides-container">

10

  </ul>

11

</part>

One distinction with this implementation is that the fullscreen button is a descendant of the aspect we’ll be making fullscreen so we’ll nonetheless have entry to it in fullscreen mode. Due to that, we are able to use the identical button to exit fullscreen mode as nicely.

Get Components

First we’ll get the weather we’re concentrating on with JavaScript:

1

const wrapper = doc.getElementById("wrapper");

2

const fullscreenButton = doc.querySelector(".full-screen");

Since we’re utilizing a toggle button, we don’t must detect the fullscreen change occasion as we are able to verify each cases inside our click on occasion listener.

1

fullscreenButton.addEventListener("click on", operate () {

2

  if (doc.fullscreenElement) {

3

    doc.exitFullscreen()

4

  } else {

5

    if (wrapper.webkitSupportsFullscreen) {

6

      wrapper.webkitEnterFullscreen()

7

    } else {

8

      wrapper.requestFullscreen()

9

    }

10

  }

11

});

Toggle Icon Show

The requestFullScreen() and exitFullScreen() strategies return guarantees so it’s potential to chain one other operate to be carried out as soon as the strategies have run utilizing the .then() technique.

We will use this technique to toggle the icon show within the fullscreen button by including and eradicating a category is-active.

That is what our up to date operate appears to be like like:

1

fullscreenButton.addEventListener("click on", () => {

2

  if (doc.fullscreenElement) {

3

    doc

4

      .exitFullscreen()

5

      .then(() => fullscreenButton.classList.take away("is-active"));

6

  } else {

7

    if (wrapper.webkitSupportsFullscreen) {

8

      wrapper

9

        .webkitEnterFullscreen()

10

        .then(() => fullscreenButton.classList.add("is-active"));

11

    } else {

12

      wrapper

13

        .requestFullscreen()

14

        .then(() => fullscreenButton.classList.add("is-active"));

15

    }

16

  }

17

});

Then we are able to replace our CSS to show the icon we wish, primarily based on the category identify:

1

.full-screen:not(.is-active) .full-screen--close {

2

  show: none;

3

}

4

5

.full-screen.is-active .full-screen--open {

6

  show: none;

7

}

It’s additionally potential to realize the identical impact utilizing the :fullscreen selector with out having to toggle the classnames with JavaScript. 

Utilizing the :fullscreen selector, our CSS appears to be like like this:

1

.full-screen--close {

2

  show: none

3

}

4

5

:fullscreen .full-screen--open {

6

  show: none;

7

}

8

9

:fullscreen .full-screen--close {

10

  show: block;

11

}

Conclusion

And that’s all, of us! On this tutorial you’ve discovered methods to implement the JavaScript Fullscreen API, together with a few use circumstances and caveats.