フルスクリーンビデオの背景にはフォールドの下にコンテンツがあります

Question

フォールドの下にあるコンテンツを含むフルスクリーンビデオのバックグラウンドを実装する作業を行います。

これまでのところ、私は全画面ビデオを問題なく動作させることができました。問題は、ビデオの下にコンテンツを追加する方法を見つけることができなかったことです。ビデオは折り目の下で停止する必要がありAKA：

GOAL：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

は100vhを占めdiv#videoBGビデオコンテナを作成します。このようにして、#mainHeaderのような要素の内部に影響を与えることができます。また、sectionの間の望ましくないギャップを避けるためにbox-sizing: border-box &リセットmargins & paddingsを追加しました。

External JSFiddle here

：

は埋め込みスニペットは、ビューポートの高さはそれほど外部でそれをチェック破ります