html - 全屏视频背景，内容低于首屏

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

您可以尝试使用视口(viewport)大小这个快速测试对我有用

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