force video full screen on rotation

[PNewCode]

Hello. What I have below is a twitch embed. When on mobile and the screen is rotated, the video does cover the area inside the browser window but it doesn't cover the entire screen (like it does if you were watching a stream on the twitch website)
Is there a way to add or alter what I have to make it cover the entire screen when rotated and not just inside the browser window?

 

<style>
#twitch-embed {
  height: 0;
  position: relative;
  top: 0;
  overflow: hidden;
  padding: 0 0 56.25%;
  width: 100%;
  border-radius: 8px;
}

#twitch-embed iframe {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  z-index: 35;
}
</style>


      <!-- Add a placeholder for the Twitch embed --> 
      <div id="twitch-embed"></div>
      <!-- Load the Twitch embed script --> 
      <script src="https://player.twitch.tv/js/embed/v1.js"></script>
      <!-- Create a Twitch.Player object. This will render within the placeholder div --> 
      <script type="text/javascript">
  new Twitch.Player("twitch-embed", {
			width: "100%",
			height: "100vh",
    channel: "channelname"
  });
</script>

 

[requinix]

Some searching suggests the Twitch player has to do it itself, but in case that's not accurate, I would try using the FullScreen API triggered by when the screen orientation changes.

[PNewCode]

I found this handy litle gem after a 2 hr nap and 4 cups of coffee in case anyone else happens to find it useful. Added this then made an outside containing div. Works perfectly!

 

<script>
var launchFullScreen = function(el) {

    // alert('launching');

    // var el = $el[0];

    if (el.requestFullscreen) {
        console.log('requestFullscreen');
        el.requestFullscreen();
    } else if (el.mozRequestFullScreen) {
        console.log('mozRequestFullScreen');
        el.mozRequestFullScreen();
    } else if (el.webkitRequestFullscreen) {
        console.log('webkitRequestFullscreen');
        el.webkitRequestFullscreen();
    } else if (el.msRequestFullscreen) {
        console.log('msRequestFullscreen');
        el.msRequestFullscreen();
    } else {
        console.log('no full screen');
    }

};

var exitFullscreen = function() {

    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }

};


// window.addEventListener('orientationchange', function() {
window.screen.orientation.onchange = function() {
    console.log(window.screen.orientation);
    if (this.type.startsWith("landscape")) {
        // document.querySelector("#containvid").webkitRequestFullscreen();
        launchFullScreen(document.querySelector("#containvid"));
    } else {
        // document.webkitExitFullscreen();
        exitFullscreen();
    }
};

var containvid = document.querySelector("#containvid");
var video = document.querySelector("video");
var controls = document.querySelector("#controls");
var play = document.querySelector("#play");
var fullscreen = document.querySelector("#fullscreen");

play.onclick = function() {
    if (video.paused) {
        video.play();
        play.innerHTML = "pause";
    } else {
        video.pause();
        play.innerHTML = "play_arrow";
    }
};

fullscreen.onclick = function() {
    if (document.webkitFullscreenElement != containvid) {
        containvid.webkitRequestFullScreen();
        window.screen.orientation.lock("landscape");
        fullscreen.innerHTML = "fullscreen_exit";
    } else {
        document.webkitExitFullscreen();
        fullscreen.innerHTML = "fullscreen";
    }
};

// document.onwebkitfullscreenchange = function() {
//     if (document.webkitFullscreenElement != containvid) {
//         fullscreen.innerHTML = "fullscreen";
//     }
// };

</script>



      <div id="containvid"> 
        <div id="twitch-embed"></div>
      </div>