对象适合：封面 - 不适用于没有边框半径的视频标签

Question

我面临一个问题，我无法object-fit: cover;使用视频标签，因为它是父容器之外的叠加层，即使我使用object-fit: cover;

只有一种解决方案有效：添加具有某些值的边界半径，例如：

border-radius: 10px; 到视频标签css。

工作示例：https : //codepen.io/anon/pen/qmrvLB 注释或注释border-radius: 10px;行以查看我的问题。

Answer 1

如果使用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>