html - 适合对象 : cover - is not working with video tags without border-radius

Question

我面临一个问题，我无法使 object-fit: cover; 使用视频标签，因为它覆盖在父容器之外，即使我使用 object-fit:封面;

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

边框半径: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>