全屏视频背景下的内容

Question

工作实现全屏幕视频背景下的内容。

到目前为止，我已经能够获得全屏视频工作没有问题。问题是我一直无法弄清楚如何在视频下添加内容。阿卡视频应折下停止：

目标：http://www.awesomescreenshot.com/0fa4atfpec

HTML：

<div class="container-fluid"> 

<div id='videoBG' class="row"> 

<video autoplay loop muted poster="screenshot.jpg" id="background"> 
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"> 
</video> 

<p id='mainHeader'> Header Title </p> 


</div> 
</div> 

<div class="container-fluid"> 
<div class='row'> 

<h1> Start of the second section below the video</h1> 

</div> 
</div> 

CSS：

#background { 
    position: absolute; 
    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: url(polina.jpg) no-repeat; 
    background-size: cover; 
} 

Answer 1

你可以尝试使用视口大小 这种快速测试工作对我来说

<div style="background-color:red;width:100vw;height:100vh"> 
</div> 
<div> 
    hi 
<ul> 
    <li>ho</li> 
    <li>ho</li> 
    <li>ho</li> 
    <li>ho</li> 
    <li>ho</li> 
    <li>ho</li> 
</ul> 
</div> 

Answer 2

您可以给它一个100vh的边缘顶部，因此100％的视口高度。

h1 { margin-top: 100vh; } 

为我所用在这里：https://jsfiddle.net/t2f1Lau6/1/

Answer 3

进行视频容器div#videoBG占据100vh。这样，您可以在不推动下面的部分的情况下影响内部元素，例如#mainHeader。另外，我添加了box-sizing: border-box &重置margin s & padding s，以避免section之间的不必要的间隙。

片段嵌入打破视高度，使外部检查：

External JSFiddle here