javascript - 如何将比例限制为 HTML5 视频中的独特内容

Question

我有一个要显示视频的页面(仅限桌面浏览器)。 我有一些代码来检查视频是横向还是纵向。然后，我想做的(这里是问题)是如果视频是纵向方向，就这样显示(在气球所在的地方播放视频。如果视频方向是横向，我只想用视频填充所有黑色减去边距)

这是HTML

   <div id="vidmodal" class="video-wrapper" ng-show="vm.showVideo">
        <img src="public/img/cancel-music.svg" alt="" id="closeX">
        <video src="{{vm.event.videoUrl}}" id="vid" loop autoplay muted poster="{{vm.event.imageUrl}}"></video>
    </div>

JS:

function clickPlay() {
          vm.hasVideo  = false; //hide the text-and-play-button div
          vm.showVideo = true; //show the video which is default hidden (false)


//make form translucent
          // document.getElementsByClassName('.rsvpbox').background = "RGBA(255,255,255,0.6)";
          // checking to see orientation of video
          var bgVideo = document.getElementById("vid");
          if (bgVideo.videoWidth > bgVideo.videoHeight){
              //it's landscape
              console.log('landscape vid');
              $('.rsvpbox').css('background-color', 'RGBA(255,255,255,0.6)');



 } else if (bgVideo.videoWidth < bgVideo.videoHeight){
          //it's portrait
          console.log('portrait vid');
          $('.rsvpbox').css('background-color', 'RGBA(255,255,255,0.6)');
          $('.rsvpbox').css('left', '80px');
          $('#vid').css('max-width', '320px !important');
          // $('.rsvpbox').css('max-width', '100% !important');
      } else {
          //image width and height are equal, therefore it is square.
          $('.rsvpbox').css('background-color', 'RGBA(255,255,255,0.6)');

  }
}

和 CSS

@media screen and (min-width: 1024px)
{
  #vidmodal
  {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 9999999;
  }
  #closeX
  {
    position: absolute;
    right: 0;
    z-index: 99999999;
  }
  #closeX:hover
  {
    cursor: hand;
    cursor: pointer;
  }
  video
  {
    /*width: 100%;*/
    /*height: 644px !important;*/
    z-index: 9999999;
    position: absolute;
    left: 0;
  }
  .btnBox 
  {
    padding-left: 15px;
    padding-right: 15px;
    width: 550px !important;
    position: relative;
    right: 70px;
  }
}

Answer 1

正如@Salketer 在评论中所述。缺少最大宽度和最大高度属性