Video play & pause on scroll

Sometime you might need to start a HTML5 video only when it reaches into the view while scrolling the page. It can be done easily in Kickpages with a bit of custom JavaScipt code.

First off, you will need to add a custom code block with the HTML5 video element hosting your video file. The code to add is below, just replace your video URL and add different styling if you would like:

<video id="video" muted="muted" playsinline="playsinline" data-loop="6" data-offset="-400" data-playing="false"><source src=" https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4"></video>
<input type="hidden" value="false" class="vid_pos_check">

Then you need to add a custom code snippet yo your header includes:

The code snippet to add can be found here: 

(function($) {

  $(document).ready(function() {
 
      var $win = $(window);
    
      var elementTop, elementBottom, viewportTop, viewportBottom;

    function isScrolledIntoView(elem) {
      elementTop = $(elem).offset().top;
      elementBottom = elementTop + $(elem).outerHeight();
      viewportTop = $win.scrollTop();
      viewportBottom = viewportTop + $win.height();
      return (elementBottom > viewportTop && elementTop < viewportBottom);
    }
        
    if($('video').length){

      var loadVideo;

      $('video').each(function(){
        $(this).attr('webkit-playsinline', '');
        $(this).attr('playsinline', '');
        $(this).attr('muted', 'muted');

        $(this).attr('id','loadvideo');
        loadVideo = document.getElementById('loadvideo');
        loadVideo.load();
      });

      $win.scroll(function () {
      
        $('video').each(function(){
          if (isScrolledIntoView(this) == true) {
              $(this)[0].play();
          } else {
              $(this)[0].pause();
          }
        });
      
      });

    }
    
   });
 
})(jQuery);

There is nothing to be changed in the code but if you would like then you can tweak the ratios and play with the code. If you do not have the required JavaScript knowledge, then please contact us with what you would like to change and we can help you out.