Question

我正在尝试建立一个网站，其中的视频显示在页面顶部的全高和全宽（不是背景 - 我想在其后显示其他div）。我希望它根据浏览器大小放大视频的中心。我已经在SO和其他网站上尝试了很多解决方案，但我仍然找不到满足我需求的解决方案。

到目前为止，我发现的所有内容都是非全屏div或背景。

HTML

<div class="header-unit">
            <div id="video-container">
                <video autoplay loop class="fillWidth">
                    <source src="video1.webm" type='video/webm' />
                    <source src="video1.mp4" type='video/mp4' />
                    Your browser does not support HTML5 video. Please upgrade your browser!
                </video>
            </div>
</div>

CSS

.header-unit 
{
    height:100%;
    width:100%;
    position: relative;
}

#video-container 
{
    position: absolute;
}

#video-container 
{
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    overflow: hidden;
}

video 
{
    position:absolute;
    z-index:0;
}

video.fillWidth
{
    width: 100%;
}

jsfiddle

我怎么能这样做？

谢谢！

编辑1：我想调整视频大小，以便完全填充任何浏览器的高度和宽度，必要时在中心放大。

Answer 1

你应该这样试试 -

＆＃13;

*{
  margin: 0;
  padding: 0;
}

video.fillWidth
{
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background-size: cover;
	  
}

＆＃13;

<div class="header-unit">
    <div id="video-container">
        <video autoplay loop class="fillWidth">
            <source src="http://www.w3schools.com/html/mov_bbb.webm" type='video/webm' />
            <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' />
            Your browser does not support HTML5 video. Please upgrade your browser!
        </video>
    </div>
</div>


<div class="wrap">
    <h1>here other tag</h1>    
</div>

＆＃13;

希望它会对你有所帮助。

Answer 2

你试过宽度：100vw;身高：100vh？

制作全屏大小的响应视频div

2 个答案: