設置一個HTML5視頻元素來覆蓋？

Question

在CSS中，背景圖片可以使用封面的大小屬性，這意味着圖片總是會大到足以填滿空間。

我想用HTML5視頻元素創建相同的大小主體。有沒有人有如何做到這一點的例子？

訣竅是確定寬度：您填充的盒子/窗口與視頻相比的寬高比，並進行相應調整。

謝謝！

Answer 1

如果你不介意有點JQuery的，你可能想看看這個plugin- http://syddev.com/jquery.videoBG/

此外，在使用HTML5視頻一個偉大的超級全面的文章是潛入HTML5系列 - http://diveintohtml5.info/video.html

Answer 2

VideoBG很不錯，但是通過將元素設置爲固定位置來工作，所以它可以用於實現視頻在「滾動頁面」內的效果，等等。

Answer 3

您可以利用CSS轉換屬性，因爲它是根據元素大小計算的，因此無論您擁有的視頻輸出的分辨率如何，都可以將它居中。

可以使用最小寬度和最小高度

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

Fiddle here