|||| || ||| |||| |||| |||| ||| |||| ||||| || | || || || || || || || || || || || ||-- || || || || ||| || || || || || ||| || | || || || || || || || || || || || |||| |||| ||| |||| |||| |||| ||| |||| ||||| BY PEALCO®

<p>STOP_LOCAL_VIDEO_WHEN_SCROLL</p>

   N/A

1. Add a local video, and make the folowing selections:

☐ Autoplay
☑ Muted
☐ Playes Inline
☐ Loop
☑ Controls

Go to Classes and write “video” in each video you want to use.

2. Add the following code to "Page Settings” (⌥ + ⌘ + p) in the button “Add Code” in the tab:
“Add custom code to head & body"

<script>
document.addEventListener("DOMContentLoaded", 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);
        });
 </script>



…..SCROLL

…… SCROLL

………SCROLL

…..SCROLL

…… SCROLL

………SCROLL

…..SCROLL

…… SCROLL

………SCROLL

…..SCROLL

…… SCROLL

………SCROLL



At this point you should already stoped the video from the movie.