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

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

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

スポンサーリンク

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

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

実装所要時間:10分程度

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を取得する仕組みとなっています。

おすすめ記事

スポンサーリンク