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

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

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

スポンサーリンク

実装内容

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

実装所要時間:10分程度

実装方法

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

$(function(){
  $('.movie-thumb').on('click',function(){
  var movie_thumb = $(this).attr("id");
  $('.movie-inner').addClass('show');
  $(this).fadeOut(1000);
  $(this).parent().append('')
  });
});

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

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です