全屏視頻背景下的內容

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