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％的高度。我只能猜测这是因为视频的宽高比影响了这个？有没有办法覆盖这个？

Strangley，如果我将#video_background上的顶部和左侧属性更改为右下角，则视频将移至页面顶部，栏位于底部。然而，随着显示器缩小，视频会被推离页面（切断视频中人员的头部）：

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

Answer 1

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

全屏HTML视频背景比率问题

1 个答案: