html - 在 div 中最大化和居中显示视频标签

Question

我想在固定的 div 中通过视频 html5 标签显示视频。我通过使用最小高度和最大高度来最大化它。但我也希望它居中。

<div class="fixed-width-height">
    <video style="min-width:100%; min-height:100%;" controls autoplay>
        <source src="myvid.mpg" type="video/mp4">
        Your browser does not support the video tag
    </video>
</div>

现在，div 始终显示视频的上部/或左侧部分，具体取决于 div 的大小。最好始终显示中心。

更新:视频标签现在居中，jbutler483 的出色工作，但视频大小存在问题，具体取决于框架 div 或视频比例或大小。视频未覆盖整个区域或居中失败。这是一个适合 400x400 盒子需求但在 1000x200 盒子上失败的片段。 http://jsfiddle.net/cremers/7Lgfyg1d/6/

更新:找到了非 IE 的工作解决方案:object-fit: cover; object-position:center; 但我想要一个完整的工作解决方案。

更新: Polyfill应该提供所需的功能，这几天我将在视频标签上对此进行测试，感谢 Philip Dernovoy。更新:很抱歉，我没能正常工作。

Answer 1

您可以结合使用定位和翻译来实现这一点:

.fixed-width-height {
  position: relative;
}
.fixed-width-height video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

<div class="fixed-width-height">
  <video style="min-width:100%; min-height:100%;" controls autoplay>
    <source src="myvid.mpg" type="video/mp4">
      Your browser does not support the video tag
  </video>
</div>

---

注意:

这将/应该适用于所有浏览器，除了 IE8>= 或 Opera Mini，如图所示 here在这些浏览器中，视频将显示在固定宽度和高度元素的左上角(尽管仍然可以使用)。

---

如果你想“覆盖”整个 div，你可以使用:

.fixed-width-height video{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
}

为了完全覆盖+拉伸(stretch)到相对定位的div父级。