How to make HTML5 video fullscreen with JavaScript?

Spread the love

Sometimes, we want to make HTML5 video fullscreen with JavaScript.

In this article, we’ll look at how to make HTML5 video fullscreen with JavaScript.

How to make HTML5 video fullscreen with JavaScript?

To make HTML5 video fullscreen with JavaScript, we use the requestFullscreen method.

For instance, we write

const elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

to select the video element with getElementById.

Then we call elem.requestFullscreen to make the element request full screen.

Conclusion

To make HTML5 video fullscreen with JavaScript, we use the requestFullscreen method.

Leave a Reply

Your email address will not be published.