css - Video Player (HTML5) size for horizontal videos

Question

I have been using video player in html5 environment with the following css and script code :

.video {
  width:100%;
  height:auto;
  border:1px solid #7b7b7b;
}

<video id="mainvideo" class="video col-xs-12 nopadding" playsinline controls autoplay>
    <source src="{{ signed_url }}" type="video/mp4">
</video>

This works fine with 1920x1080 videos which are vertical. But for horizontal videos which are 1080x1920, height:auto exceeds the size of the screen.

How can I make the horizontal videos to fit to a screen size like vertical videos ?

question from:https://stackoverflow.com/questions/66053444/video-player-html5-size-for-horizontal-videos

Answer 1

Waitting for answers