YouTube Player APIを使用して再生中のYouTube動画がスクロールして画面から見えなくなったら自動で音量をミュートさせる方法（iframeタグを使用）のデモページ

.wrap {
  width: 600px;
  margin: 1000px auto;
 }

.text {
  line-height: 1.5;
  margin: 50px 0 0;
  text-align: center;
}

.movie {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width:640px) {
  .wrap {
    width: 100%;
  }
}
  

inView('.movie')
.on('enter', el => {
  el.classList.remove("stop")
})
.on('exit', el => {
  el.classList.add("stop")
});

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player("player",{
  });
}

$(window).on('scroll',function(){
  if($(".movie").hasClass('stop')){
   player.mute();
  } else {
   player.unMute();
  }
});