Javascript 如何将比例限制为HTML5视频上的独特内容

我有一个页面将显示视频（仅在桌面浏览器上）。 我有一些代码来检查视频是横向的还是纵向的。然后，我想做的（这里是问题所在）是如果视频是纵向的方向，那么就这样显示（在气球所在的位置播放视频。如果视频方向是横向的，我只想用视频填充所有的黑色减去空白）

这是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>

---

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

简单地使用最大宽度和最大高度应该可以做到这一点。。。除非我遗漏了什么？这就是答案。由于某种原因，当我最初这样做的时候，它不起作用。我一定是搞砸了别的事。谢谢@salketter

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)');

  }
}

@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;
  }
}