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

Question

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 1

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