css - 全宽 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属性时。