javascript - How to constrain proportions to something unique on HTML5 video -

i have page going display video (on desktop browsers only). have code check if video landscape or portrait. then, want (here issue) if video portrait orientation, display such (with video playing balloons are. if video orientation landscape, want fill black minus margin) video

here 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> 

the js:

function clickplay() {           vm.hasvideo  = false; //hide text-and-play-button div           vm.showvideo = true; //show video default hidden (false)   //make form translucent           // document.getelementsbyclassname('.rsvpbox').background = "rgba(255,255,255,0.6)";           // checking 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 , height equal, therefore square.           $('.rsvpbox').css('background-color', 'rgba(255,255,255,0.6)');    } } 

and css

@media screen , (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;   } } 

as @salketer stated in comments. max-width , max-height attrs missing