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

TOP > jQuery > 【jQuery】YouTubeの埋め込みでオリジナルサムネイルを実装するテクニック

【jQuery】YouTubeの埋め込みでオリジナルサムネイルを実装するテクニック

この記事は2018年7月6日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

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

今回はレスポンシブ対応にしたYouTubeの埋め込みに関する内容です。YouTubeを埋め込む時に、簡単にオリジナルのサムネイル画像を実装する方法をご紹介します。「YouTube API」などは使用せずに、jQueryだけで制御する仕組みとなっています。

実装所要時間:10分程度
難易度:初心者コーダーでも実装可能

使いどころ

YouTubeの動画視聴を促したい時などに便利なテクニックとなります。また、YouTubeの埋め込み動画をWEBページのデザインにマッチさせたい時などにも効果的です。

CSS,JavaScriptの記述内容

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

$(function(){
  $('.movie-thumb').on('click',function(){
  var movie_thumb = $(this).attr("id");
  $('.movie-inner').addClass('show');
  $(this).fadeOut(1000);
  $(this).parent().append('<iframe width="600" height="338" src="https://www.youtube.com/embed/' + movie_thumb + '?rel=0&autoplay=1&loop=1&playlist=' + movie_thumb + '" frameborder="0" allowfullscreen></iframe>')
  });
});

実装のポイント

仕組みは非常にシンプルです。

  • 1)オリジナルサムネイル表示用のdivにサムネイルを背景画像として設定
  • 2)on('click', function())でクリックした時にサムネイル表示用のdivを.fadeOut()で非表示
  • 3)YouTubeを埋め込む用のiframeを.append() でソース上に追加。また、オリジナルサムネイル表示用のdivのid名に動画IDの文字列を付与することで、そこから動画IDを取得する仕組みとなっています。

スポンサーリンク