响应式网页中的中心<video>标记

Question

我想学习如何对<video>进行CSS调整，以便在调整网页大小时，视频的尺寸不变，但显示为CSS background-position: center的中心，但对于CSS。

这里是伪代码，

...

<style>
    video { video-position: center } /* I wish */
</style>

...

<div id="background">
    <video autoplay>
        <source src="background.mp4">
    </vido>
</div>

...

等同于video { video-position: center }的CSS，就好像background-position一样，我正在寻找。

谢谢！

Answer 1

给#background div一个相对位置，然后给一个百分比的填充底部。与填充底部百分比混淆，直到达到所需高度。然后给视频标签一个绝对位置，宽度和高度为100％，如下所示：

这是一个小提琴Fiddle Demo

#background{
  position:relative;
  padding-bottom:55%;
}
#background video{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
}

Answer 2

试试这个：

video {
    width: 720px;
    height: auto;
    margin: 0 auto;
}