jQuery】スクロールして表示エリアに入ったらYouTubeの埋め込み動画を動的に表示させる方法（YouTube API不使用）のデモページ

.wrap {
  position: relative;
  width: 768px;
  margin: 70px auto 0;
}
.movie {
  position: relative;
  width: 100%;
  margin: 1000px 0;
  padding-bottom: 56.25%;
}

.movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width:640px){
  .block {
    width: 100%;
  }
}

inView('.movie')
.once('enter', el => {
  el.classList.add("show")
})

 $(window).on('scroll',function(){
  if($(".movie").hasClass('show')){
    const movie_id = 'fgxk6hdHqxE';
    $('.movie').append('<iframe width="600" height="338" src="https://www.youtube.com/embed/' + movie_id + '?rel=0&mute=1&loop=1&playlist=' + movie_id + '" frameborder="0" allowfullscreen></iframe>').removeClass("show");
  }
});