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