显示最大化并以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的工作这里.在这些浏览器,视频将在固定宽度高度元件的左上角显示的(尽管仍然会功能).

如果你想"覆盖"整个div,你可以使用:

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

为了完全覆盖+拉伸到相对定位的div父级.

Answer 2

我不确定我是否理解你想要什么。对于视频标签，我曾经使用 object-contain 和 object-position 来处理大多数布局需求。使用您提供的 jsfiddle，尝试将“子”类更改为：

.child{
    position: relative;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
}

这将使视频填充到全宽或全高，具体取决于 h/w 比率。如果您希望视频填充所有 div 并使其部分溢出，只需将 object-fit 更改为覆盖即可。我希望这有帮助。