html - 使视频匹配其父容器的大小(使用 vh 和 vw 单位)

Question

我在一个容器中有一个视频元素，我希望它能填满所述父容器(相当于 background-size: cover；用于背景图像)。视频的父容器使用vw和vh单位。

我真的很挣扎。我可以通过使用 width: 100% 使其适合宽度，但 height: auto 不会填充容器的高度并且使用与父元素相同的 vw 和 vh 测量值也不成功。

我将如何处理这个问题 - 我似乎在原地打转/拔头发。

这需要 JS 解决方案吗？

任何想法都会很棒。代码和 Codepen 链接如下。

代码笔:https://codepen.io/pauljohnknight/pen/EXwbzz

var video = document.getElementsByTagName('video');
video[0].play();
video[0].loop = true;
video[0].controls = false;

* {
  margin: 0;
  padding: 0;
}

.videoholder {
  background: #666;
  height: 150vh;
  width: 50vw;
}

video {
  width: 100%;
  height: auto;
}

<div class="wrapper">
  <div class="videoholder">
    <video src="https://www.marketing-people.com/wp-content/uploads/2017/02/bakerbox-mockup.mp4" class="myvideo"></video>
  </div>
</div>

Answer 1

您可以绝对定位视频标签以填充父容器，然后在视频标签上使用 object-fit: cover;。

https://codepen.io/anon/pen/Xgexdj

更新:这不适用于任何版本的 IE。这是一个可以在 IE 8 - 11 中运行的 polyfill。https://github.com/jonathantneal/fitie