HTML / Javascript-视频播放器全屏问题，无法全屏显示

Question

我的视频播放器有问题。全屏无法正常工作。这是问题的图像。

Image of the Full Screen Not Working

我想用全屏模式修复视频播放器，有什么方法可以实现？

这是我的视频播放器代码。

<div class="container" id='container2'>
     <video controls playsinline class="player" width="100%">
              <!-- Video files -->
              <source src="./inflightapp/storage/app/public/movie_videos/<?php echo ''.$row2['movie_video'].''; ?>" type="video/mp4" size="1080">
     </video>
</div>

这是我的视频播放器js文件代码。

 document.addEventListener('DOMContentLoaded', () => { 
  // This is the bare minimum JavaScript. You can opt to pass no arguments to setup.
  const player = new Plyr('.player');
  var ms = new MediaSource();

  // Expose
  window.player = player;


  window.player.onFullscreen = false; // fullscreen flag
  // override fullscreen toggle
  window.player.fullscreen.toggle = function(){
    if (window.player.onFullscreen) {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }else if(document.webkitExitFullscreen){
        document.webkitExitFullscreen();
      }else if(document.mozCancelFullScreen){
        document.mozCancelFullScreen();
      }else if(document.msExitFullscreen){
        document.msExitFullscreen();
      }
      window.player.onFullscreen = false;
    }else{
      window.player.container = document.getElementById("container2");
      window.player.container.enterFullscreenMode = window.player.container.requestFullscreen || window.player.container.webkitEnterFullscreen || window.player.container.mozRequestFullScreen || window.player.container.msRequestFullscreen;
      window.player.container.enterFullscreenMode();
      window.player.onFullscreen = true;
    }
  }

});