javascript - スクロールが表示されているときに YouTube ビデオを再生する

Question

このコードを使用すると、スクロールするとすぐにビデオが一時停止します。代わりに、ビデオが表示されなくなったときにビデオを一時停止したい。どうすればいいですか？

//This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//This function creates an <iframe> (and YouTube player)

var player;

function onYouTubeIframeAPIReady() {

    player = new YT.Player('video', {
    height: '100%',
    width: '100%',
    videoId: 'V6Y-ahQFQDA',
    playerVars: {
        'start': '1',
        'color': 'white',
        'controls': '1',
        'showinfo': '0'
    },
    events: {
      'onReady': playOnScroll,
      'onStateChange': playOnScroll
    }
  });

}

前の部分は、ビデオをロードすることです。私の問題は、この if else ステートメントにあると思います。スクロールを開始するとすぐに、ログのコマンドが一時停止され、機能しなくなります。

function playOnScroll() {
  var video = document.getElementById('video');

  var x = video.offsetLeft,
      y = video.offsetTop,
      w = video.offsetWidth,
      h = video.offsetHeight,
      r = x + w, //right
      b = y + h, //bottom
      visibleX,  visibleY,  visible;

      visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
      visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

      visible = visibleX * visibleY / (w * h);

  var percent = 0.6;
  var inView = visible > percent;

      if (inView) {
          console.log('play');
          player.playVideo();

      } else {
          console.log('paused');
          player.pauseVideo();
      }
}

window.addEventListener('scroll', playOnScroll, false);
window.addEventListener('resize', playOnScroll, false);