限制html5视频的最小尺寸

Question

I have the following html on a html5 video:

<video id="video1" autoplay>
       <source src="static/video/5986637.mp4" type="video/mp4"/>
       Your browser does not support the video tag.
</video>

css:

video
{
width: 100%    !important;
height: auto   !important;
position:fixed;
}

I want to keep the width and height in such css until the height of the video is smaller than a certain value. After smaller than a certain value, the height will remain unchanged while the width will still keep 100%. So what I should do in CSS/Javascript? Thanks.

Answer 1

You can use CSS min-height for this. For more info: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height

video {
  min-height: 200px;
}