全宽HTML5视频问题

Question

我正在寻找一种方法来制作全宽（但不是全高）的HTML5视频。

像图像的背景覆盖CSS可以让我做的事情。

示例：

http://photohack.rs.af.cm

标题下方的图像栏将替换为全宽视频背景。

宽度100％并设置高度不起作用，因为视频是自动缩放的，而不是全宽。

谢谢！

Answer 1

在大多数情况下，这是一个简单的修复。

video {
   max-width: 640px /* cannot exceed this width */
   max-height: 390px /* cannot exceed this height */
   width: 100% /* 640px or less depending on size of viewport */
   height: auto /* automatically calculates height from via above values */
}

始终！在处理全宽视频，响应式设计和移动设备时，始终使用百分比。唯一可以使用像素的是定义max-height和max-width属性。