设置要覆盖的HTML5视频元素？

Question

在css中，背景图像可以使用封面的大小属性，这意味着图像将始终准确地大到足以填充空间。

我想创建具有HTML5视频元素的相同大小调整主体。有谁有这样做的例子吗？

诀窍是找出与视频相比你填充的框/窗口的宽度:高度比，并进行相应的调整。

谢谢!

Answer 1

如果你不介意使用一点JQuery，你可能想看看这个插件-- http://syddev.com/jquery.videoBG/

此外，有关使用HTML5视频的一篇非常全面的文章是深入了解HTML5系列-- http://diveintohtml5.info/video.html

Answer 2

VideoBG很不错，但它的工作原理是将元素设置为固定位置，因此它可以用来实现效果，例如，视频在“滚动页面”内，等等。

Answer 3

您可以利用CSS translate属性，因为它是根据元素大小计算的，它允许您将其居中，而不管视频输出的分辨率如何。

可以使用min-width和min-height保持比率

position:absolute;
top: 50%;          
left: 50%;         
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);

Fiddle here