Object-fit: cover - 不适用于没有边界半径的视频标签

【问题标题】：Object-fit: cover - is not working with video tags without border-radiusObject-fit: cover - 不适用于没有边界半径的视频标签
【发布时间】：2017-04-29 17:18:51
【问题描述】：

我遇到了一个问题，即我无法使 object-fit: cover; 与 video 标签一起使用，因为它覆盖在父容器之外，即使我使用 object-fit: cover;

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

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

工作示例： https://codepen.io/anon/pen/qmrvLB 评论或评论 border-radius: 10px; 行，看看我有什么问题。

【问题讨论】：

所以使用border-radius: 1px; ...没有人会看到那个半径
这也是我的想法

标签： html css html5-video

【解决方案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>

【讨论】：