Currently working on integrating a full screen video background with content positioned below the fold.
Successfully implemented the full screen video without any issues. However, struggling to figure out how to add content underneath the video while ensuring it stops at the fold:
TARGET:
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;
}