是否可以加载人像/风景视频并使之响应CSS？

Question

我有两个版本的视频，具有16/9和9/16的纵横比，我想在网站的后台播放。在整个互联网上浏览后，我设法用CSS加载了正确的视频。我还设法添加了按钮来暂停视频并使用javascript取消静音。但是，当我旋转设备（例如，从横向到纵向）时，新的纵向视频会与横向视频的音乐一起显示。我尝试调用pauseVideo函数，但这绝对不起作用。我什至不确定我采用的方法（纯CSS）是否可以实现我想要的功能。这是我到目前为止的内容：

HTML：

  <div id="video-landscape">
    <script>
      pauseVideo("video-pt");
    </script>  
    <div class="video-container" onClick="openFullscreen('video-ls')">
      <video id="video-ls" autoplay muted loop playsinline poster="images/256x256.png">
          <source src="videos/16-9.mp4" type="video/mp4">
      </video>
    </div>
    <div class="content footer">
      <h4>Landscape mode
        <button class="myBtn" id="pid-ls" onclick="pauseFunction('video-ls','pid-ls')"><i class="fas fa-pause fa-xs"></i></button>
        <button class="myBtn" id="aid-ls" onclick="audioFunction('video-ls','aid-ls')"><i class="fas fa-volume-up fa-xs"></i></button></h4>
    </div>
  </div>
  <div id="video-portrait">
    <script>
      pauseVideo("video-ls");
    </script>  
    <div class="video-container" style="width: 100%" onClick="openFullscreen('video-pt')">
      <video id="video-pt" autoplay muted loop playsinline poster="images/256x256.png">
          <source src="videos/9-16.mp4" type="video/mp4">
      </video>
    </div>
    <div class="content footer">
      <h4>Portrait mode
        <button class="myBtn" id="pid-pt" onclick="pauseFunction('video-pt','pid-pt')"><i class="fas fa-pause fa-xs"></i></button>
        <button class="myBtn" id="aid-pt" onclick="audioFunction('video-pt','aid-pt')"><i class="fas fa-volume-up fa-xs"></i></button></h4>
    </div>
  </div>

CSS：

<style>
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 5px 10px;
}

.myBtn {
  padding: 5px 10px;
  border: 1px solid #818181;
  font-size: 18px;
  background: #000;
  color:#818181;
  cursor: pointer;
  margin:5px;
  float: right;
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}
.video-container > video {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.footer {
  z-index: 10;
}

@media screen and (max-aspect-ratio: 16/9) {
  .video-container > video {
    height: 100%;
  }
}
@media screen and (min-aspect-ratio: 16/9) {
  .video-container > video {
    width: 100%;
  }
}

@media screen and (orientation:portrait) {
  #video-landscape {
        display: none;
    }
  #footer-ls {
        display: none;
    }
}
@media screen and (orientation:landscape) {
  #video-portrait {
        display: none;
    }
  #footer-pt {
        display: none;
    }
}
}
</style>

JAVASCRIPT

  <script>

    function openFullscreen(vid) {
      var video = document.getElementById(vid);
      console.log("hitting")
      var elem = video
      console.log(elem)
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
      }
    }

  function pauseVideo(vid) {
    var video = document.getElementById(vid);
    video.pause();
  }


  // Pause and play the video, and change the button icon
  function pauseFunction(vid, pid) {

    // Get the video and buttons
    var video = document.getElementById(vid);
    var pausebtn = document.getElementById(pid);

    if (video.paused) {
      video.play();
      pausebtn.innerHTML = '<i class="fas fa-pause fa-xs"></i>';
    } else {
      video.pause();
      pausebtn.innerHTML = '<i class="fas fa-play fa-xs"></i>';
    }
    pausebtn.blur();
  }

  // Unmute and mute the video, and change the button icon
  function audioFunction(vid, aid) {

    // Get the video and buttons
    var video = document.getElementById(vid);
    var audioBtn = document.getElementById(aid);

    if (video.muted) {
      video.muted = false;
      audioBtn.innerHTML = '<i class="fas fa-volume-mute fa-xs"></i>';
    } else {
      video.muted = true;       
      audioBtn.innerHTML = '<i class="fas fa-volume-up fa-xs"></i>';
    }
    audioBtn.blur();
  }

  // START: Mobile Autoplay Video
  var mobilevideo = document.getElementsByTagName("video")[0];
  mobilevideo.setAttribute("playsinline", "");
  mobilevideo.setAttribute("muted", "");
</script>