Autoplay Video on Scroll

A recreation of how Facebook autoplays videos as you scroll down your newsfeed muted.

by Augustus Yuan

HTML

<body>
    <div>
        <h1>HOW TO MAKE A VIDEO AUTOPLAY ON SCROLL</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bibendum feugiat velit, ac rhoncus justo rutrum in. Vivamus vitae dui sem. Sed sodales rutrum tellus, ac placerat mauris dignissim quis. Vestibulum ultricies libero sapien, sed ultrices sem commodo ac. Morbi eu aliquam lorem. Nulla gravida non mauris eget tincidunt. Ut id sagittis velit. Donec faucibus ultrices molestie. Vivamus eget nisi sagittis, tincidunt turpis eu, aliquam turpis. Fusce venenatis aliquet sapien at rhoncus.

In quis congue mi. Vestibulum ac neque non magna gravida bibendum eu eget lectus. Aenean sagittis neque nec dictum faucibus. Aliquam aliquet dolor turpis, elementum placerat justo dignissim et. Vivamus ac lectus vel turpis aliquam volutpat. Curabitur lobortis dui quis turpis suscipit, ut sagittis dolor tincidunt. Aenean eleifend adipiscing purus, eget hendrerit elit semper vel. Mauris eu elit erat. Mauris metus magna, scelerisque vitae scelerisque nec, congue eu dui. Maecenas lacinia lacus arcu. Duis luctus purus eu turpis dignissim sollicitudin. Proin ut urna lorem. Donec dictum elit ut accumsan commodo. Fusce a euismod tellus.

Praesent euismod venenatis sapien bibendum venenatis. Phasellus lobortis vitae turpis eget luctus. Nulla sit amet euismod felis. Aliquam sit amet quam leo. Nunc iaculis vulputate aliquet. Sed tincidunt erat in sodales scelerisque. Curabitur eu nunc iaculis, luctus neque ac, sodales nisi. Quisque nibh arcu, consectetur nec sodales vitae, aliquet sed ante.
        </p>
    
        <video id="video" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
            <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/>
      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse...

CSS

div {
    font-family: helvetica;
    text-align:center;
    width: 600px;
}

video {
    margin-left: auto;
    width: 400px;
    height: 228px;
}

JavaScript

$(window).scroll(function () { 
  var $video = $('video');  
  var window_offset = $video.offset().top - $(window).scrollTop();  
  var vid = document.getElementsByTagName("video")[0];
    $video.prop('muted', true);
    if (window_offset <= 200 && window_offset >= -100) {
        vid.play();
    } else {
        vid.pause();
    }
    
    console.log(window_offset);
});