var frameNumber = 0,
playbackConst = 1,
vid = document.getElementById('v0'),
homeSliderContainer = document.querySelector(".home-slider-container");
function scrollPlay() {
var scrollTop = homeSliderContainer.scrollTop,
screenHeight = window.innerHeight,
frameNumber = (scrollTop / screenHeight) * playbackConst;
vid.currentTime = frameNumber;
window.requestAnimationFrame(scrollPlay);
}
window.requestAnimationFrame(scrollPlay);
* { box-sizing: border-box; }
body { margin: 0; padding: 0; background: #222; }
#v0, .home-slider-container {
position: fixed;
width: 100%;
height: 100%;
}
.home-slider-container {
overflow: auto;
background: rgba(0,0,0,.4);
color: #fff;
font-family: Arial, Helvetica, sans-serif;
padding: .5em 2em;
}
<video id="v0">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
<div class="home-slider-container">
<h1>Hello, world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales sit amet mauris nec vulputate. Aliquam erat volutpat.</p><p>Suspendisse orci sem, iaculis sed ullamcorper non, vehicula vitae nisl. Phasellus vestibulum scelerisque lacinia. Ut a nisl dictum, cursus sem eget, dignissim eros. Maecenas eget dolor eget augue luctus cursus. </p><p>Sed faucibus pulvinar tincidunt. Donec a dolor elementum, lobortis est vel, blandit velit. </p><h1>Hello world, again</h1><p>Quisque facilisis tortor iaculis arcu dignissim, quis consectetur neque blandit. Pellentesque malesuada odio imperdiet velit ullamcorper, sit amet porta justo maximus. Aenean accumsan, tortor eget.</p><p>Scelerisque varius, nunc tellus malesuada lacus, ut interdum metus ante eu orci. Nullam porttitor vel neque vitae faucibus. Integer interdum pellentesque ligula sed aliquet.</p><h1>Hello, world once more</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales sit amet mauris nec vulputate. Aliquam erat volutpat.</p><p>Suspendisse orci sem, iaculis sed ullamcorper non, vehicula vitae nisl. Phasellus vestibulum scelerisque lacinia. Ut a nisl dictum, cursus sem eget, dignissim eros. Maecenas eget dolor eget augue luctus cursus. </p><p>Sed faucibus pulvinar tincidunt. Donec a dolor elementum, lobortis est vel, blandit velit. </p><h1>Hello world, one last time</h1><p>Quisque facilisis tortor iaculis arcu dignissim, quis consectetur neque blandit. Pellentesque malesuada odio imperdiet velit ullamcorper, sit amet porta justo maximus. Aenean accumsan, tortor eget.</p><p>Scelerisque varius, nunc tellus malesuada lacus, ut interdum metus ante eu orci. Nullam porttitor vel neque vitae faucibus. Integer interdum pellentesque ligula sed aliquet.</p>
</div>