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