viewport scroll in/out event

video-playback-onscroll.js

/**
 * Play or pause video based on visibility in window viewport.
 *
 * @param {any} video The video element.
 *
 * @memberof TabbedVideo
 */
toggleVideoPlayback(video) {

  var windowHeight = window.innerHeight,
    videoTop = video.getBoundingClientRect().top,
    videoBottom = videoTop + video.offsetHeight;

  if ( videoTop < windowHeight && videoBottom > 0 ) {
    video.play();
  }

  if ( videoBottom <= 0 || videoTop > windowHeight ) {
    video.pause();
  }

}