再生中のYouTube動画をスクロールさせて画面から見えなくなったらYouTube Player APIを使用して自動で一時停止させる方法(iframeタグを使用)のデモページ

※デベロッパーツール等でソースコードをご確認ください(Please check using Developer tools)

マイナビAGENT

動画を再生中にスクロールして画面から見えなくすると一時停止します。
(in-view.min.jsを使用)

スポンサーリンク

マイナビAGENT

CSS

.wrap {
    width: 600px;
    margin: 600px 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%;
    }
  }
  

JavaScript

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.pauseVideo();
        }
      });