Autoplay an HTML5 Video When It Scrolls Into View

This jQuery snippet makes an HTML5 video autoplay when it scrolls into view and pauses it again when it leaves the screen. It’s useful for product or background videos further down a page, which would otherwise play unseen or wait for a click.

How it works

Think of the browser window as the area between two lines: scrollTop, the current scroll position, and scrollBottom, the scroll position plus the window height. A video plays only while part of it sits between those two lines. When it’s entirely above or entirely below the visible area, the script pauses it.

        $(document).ready(function() {
            // Get media - with autoplay disabled (audio or video)
            var media = $('video').not("[autoplay='autoplay']");
            var tolerancePixel = 40;

            function checkMedia(){
                // Get current browser top and bottom
                var scrollTop = $(window).scrollTop() + tolerancePixel;
                var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;

                media.each(function(index, el) {
                    var yTopMedia = $(this).offset().top;
                    var yBottomMedia = $(this).height() + yTopMedia;

                    if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){ //view explaination in `In brief` section above
                        $(this).get(0).play();
                    } else {
                        $(this).get(0).pause();
                    }
                });

                //}
            }
            $(document).on('scroll', checkMedia);
        });

• The selector picks every <video> on the page except those that already have autoplay="autoplay". Use a class instead of 'video' if only some videos should behave this way.
• tolerancePixel shrinks the visible area by 40 pixels at the top and bottom, so a video has to be a little way onto the screen before it starts.
• checkMedia() runs on every scroll event, compares each video’s top and bottom position with the visible area, and calls the video’s native play() or pause() method.

Things to watch

• Browsers usually block videos with sound from starting until the visitor has interacted with the page, and scrolling doesn’t count. Add the muted attribute to your videos so play() is allowed. If a video still won’t play on an iPhone, see fixing HTML5 video autoplay in Safari on iPhone and iPad.
• The check only runs on scroll, so a video that is already visible when the page loads won’t start until the visitor scrolls.
• The code needs jQuery. In WordPress, jQuery runs in no-conflict mode and $ isn’t defined globally, so use jQuery instead or wrap the code in a function that receives $.

Try it in the JSFiddle below:

Related articles

• toggling classes as a container scrolls sideways: another jQuery scroll handler that checks positions