如何像youtube一样，使用html5在移动全屏中播放占据整个屏幕的垂直视频？

<video id="myVideo" src="path/to/vertical-video.mp4" playsinline></video>

var video = document.getElementById('myVideo');

// 进入全屏
function requestFullScreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// 退出全屏
function exitFullScreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

video.addEventListener('click', function() {
  if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
    exitFullScreen();
  } else {
    requestFullScreen(video);
  }
});

video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

window.addEventListener('load', function() {
  video.play();
});