あなたのキモチ つなげるカタチ

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

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

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

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

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

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

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

実装所要時間は10分程度

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");
  }
});

実装のポイント

in-view.jsを使用してスクロールして表示エリアに入った時の処理を行っています。

この記事を書いた人(著者情報)

片岡 学

カタチップ編集長。昭和生まれの30代でWeb業界歴は15年。プログラマー出身のWebデザイナー。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのディレクター兼コーダーを担当。最近はSNSの運用にも業務範囲を拡大中です。

著者画像

スポンサーリンク