Pause / Resume Videos Using jQuery When Entering & Leaving Webpage Viewport on Scrolling

Adding video and sometimes multiple videos on a single page creates problem when they start playing all at once if they have been setup as autoplay and when they are out of screen view area due to scrolling web page, they continue to play and irritate viewer, here is the solution for this pesky issue, just pause the video that is now out of viewable area of the web page due to scrolling with the help of little jQuery snippet.

Here is the jQuery code that you can add using Code Snippet Plugin or using Additional JS code area of your theme or simply add in external js file and link from your webpage, (make sure you have jQuery added in your page for it to work):

jQuery(document).ready(function() {

	var $win = jQuery(window);
    
  	var elementTop, elementBottom, viewportTop, viewportBottom;

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

      var loadVideo;

      jQuery("video").each(function(){
        jQuery(this).attr("webkit-playsinline", "");
        jQuery(this).attr("playsinline", "");
        jQuery(this).attr("muted", "muted");

        jQuery(this).attr("id","loadvideo");
        loadVideo = document.getElementById("loadvideo");
        loadVideo.load();
      });

      $win.scroll(function () { // video to play when is on viewport 
      
        jQuery("video").each(function(){
          if (isScrolledIntoView(this) == true) {
              jQuery(this)[0].play();
			  //console.log(this+": started");
          } else {
              jQuery(this)[0].pause();
			  // console.log(this+": paused");
          }
        });
      
      });  // video to play when is on viewport

    } // end .field--name-field-video
    
  
});

And here is the Gist of this code:

Hope that helps.