Полноэкранный видеоролик с содержимым под сгибом

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

Вставить фрагмент кода нарушает высота окна просмотра, так проверьте его снаружи:

External JSFiddle here