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

1 コーディングテクニックの実装内容
2 コーディングテクニックの使いどころ
3 実装難易度・必要なスキル
4 CSS,JavaScriptの記述内容
5 実装のポイント

コーディングテクニックの実装内容

今回はWeb制作におけるYouTubeの埋め込みに関する内容です。スクロールして表示エリアに入ったらYouTubeの埋め込み動画を動的に表示させる方法をご紹介します。「YouTube API」などは使用せずにjQueryだけで制御する仕組みとなっています。

コーディングテクニックの使いどころ

ページ読み込み時にiframeでYouTubeの埋め込みを表示させるとページには重いの負荷がかかります。しかし、この方法を使えばWebページの負荷を軽減してパフォーマンスを向上させる効果が見込めます。

実装難易度・必要なスキル

コーディングとjQueryの基礎的な知識があれば実務未経験のコーダー、マークアップエンジニア、Webデザイナー、エンジニア、副業の初心者など誰でも実装可能です。

実装所要時間は10分程度

>> DEMOはこちらから！（View Demo）

>> ページの読み込みが遅い場合はこちら

CSS,JavaScriptの記述内容

実装に必要なスクリプトはたったのこれだけです。

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

 $(window).on('scroll',function(){
  if($(".movie").hasClass('show')){
    const movie_id = 'rokGy0huYEA';
    $('.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");
  }
});