我面临一个问题，我无法object-fit: cover;使用视频标签，因为它是父容器之外的叠加层，即使我使用object-fit: cover;
只有一种解决方案有效：添加具有某些值的边界半径，例如：
border-radius: 10px; 到视频标签css。
工作示例：https : //codepen.io/anon/pen/qmrvLB注释或注释border-radius: 10px;行以查看我的问题。
如果使用border-radius: 1px;（并且没有人会看到该半径）感觉太笨拙，请使用wrapper
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
width: 50%;
height: 50px;
overflow: hidden;
}
video {
object-fit: cover;
width: 100%;
height: 100%;
}<div class="wrapper">
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句