Making video fullscreen automatically when the device orientation is landscape with javascript Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Making video fullscreen automatically when the device orientation is landscape with javascript without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have a video that if you press a button it becomes fullscreen. I need help making the video fullscreen automatically when the device is in landscape orientation. I have tried many ways but none have worked.

Here is my code:

var elem = document.getElementById("video");

function becomeFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) {
    /* IE/Edge */
    elem.msRequestFullscreen();
  }
}
<video id="video" width="600" height="800">
            <source src="videoplaceholder.mp4" />
        </video>

<button id="button" onclick="becomeFullscreen()">Fullscreen</button>

Answer

You need to check the window.orientation property inside the orientationChange handler. Inside the event handler of orientationChange event, check the window.screen.orientation property. If it’s landscape make video fullscreen.

https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation

We are here to answer your question about Making video fullscreen automatically when the device orientation is landscape with javascript - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji