Html为具有自定义高度的视频制作全宽度

Question

在阅读了大量关于这个解决方案的文档之后，我无法解决这个问题，我想显示全宽度和自定义高度的视频，比如width='100%' height='100px'

<div class="row">
    <div class="video-container">
        <video preload="auto" loop="" autoplay="" muted="" width="700px" height="50px">
            <source src="/uploads/MDclouds3-sunset.webmhd.webm"
                    type="video/webm">
            <source src="/uploads/MDclouds3-sunset-H.264-for-VP.m4v"
                    type="video/mp4">
        </video>
    </div>
</div> 

我怎么能这么做？提前感谢

Answer 1

你需要在视频上使用“object-fit”。

根据您需要做的事情，object-fit: fill或object-fit: contain应该做到这一点：

https://codepen.io/manticorp/pen/jYXGRZ

注意，如果您想要object-fit:cover，就必须有一个尺寸也是width: 100%; height: 100px;的容器，并在其上设置overflow:hidden;。

Answer 2

在css部分中添加以下内容：

video { width: 100% !important; height: 100px !important; }