全屏 HTML 视频背景比例问题

Question

我一直在为此绞尽脑汁，无法弄清楚。我正在尝试制作一个包含在 div 中的全屏 html5 视频，类似于 http://designmodo.com/startup/

我有一个容器 div“vscenter”。 在 css 中，我将其设置为

#vscenter {
  width:100%;
  position:relative;
}

我有一个 jquery 可以检测浏览器窗口的高度并将该高度包含到容器 div 中。

$(function(){
    $('#vscenter').css({'height':(($(window).height())-0)+'px'});



$(window).resize(function(){    
$('#vscenter').css({'height':(($(window).height())-0)+'px'});
});

});

对于我在 CSS 中这样设置的视频：

#video_background { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1000; 
    //overflow: hidden;
    opacity:0.8;
}

您可以在此处查看当前形式的效果：www.dyhas.com/jonas

问题是视频实际上并没有拉伸到 100% 的高度。我只能推测这是因为视频的纵横比影响了这一点？有没有办法覆盖它？

斯特兰利， 如果我将 #video_background 上的 top 和 left 属性更改为右下角，则视频将移至页面顶部，并且条形图出现在底部。但是，随着显示器的缩小，视频会被推离页面（切断视频中人物的头部）：

我在这里错了吗？有没有更简单的方法来实现这一目标？我尝试了各种javascript，但无济于事。

Answer 1

我想我明白了。原来我只需要使用适当的大小再次将视频转换为 mp4 和 webm。