埋め込んだYouTubeの動画をページ読み込み時に処理させると重いので、対処法。
「YouTubeの動画をサイトに埋め込むと重い!という人のための解決方法」をヒントに、もっと簡単になるように作ってみた。
動画を埋め込む場所にダミーのサムネイル画像を設定しておき、クリックした時に埋め込みコードに入れ替えて自動再生させる。単純だけどナイスアイディアですよほんとこれ。
【HTML】
<div class="movie"> <div class="thumb">動画1</div> <div class="thumb">動画2</div> <div class="thumb">動画3</div> </div>
※「動画○」の部分はサムネイル画像を入れるなり画像置換で設定するなり。
※スマホではオートプレイ設定にしていても再生されず、2回タップが必要になってしまうので切り分け。
※埋め込みコードのパラメータは必要に応じて変更。ただしautoplay=1は必須。
【動画が一つの場合のJS】
var agent = navigator.userAgent; if (agent.indexOf('iPhone') > 0 || agent.indexOf('iPod') > 0 || agent.indexOf('Android') > 0) { $('.movie .thumb').hide().parent().html('<iframe width="776" height="436" src="http://www.youtube.com/embed/(動画URL)?rel=0&modestbranding=1&showinfo=0&disablekb=1&autoplay=1&wmode=transparent" frameborder="0" allowfullscreen></iframe>'); } else { $('.movie .thumb').click(function(){ $(this).hide().parent().html('<iframe width="776" height="436" src="http://www.youtube.com/embed/(動画URL)?rel=0&modestbranding=1&showinfo=0&disablekb=1&autoplay=1&wmode=transparent" frameborder="0" allowfullscreen></iframe>'); }); }
【動画が複数の場合のJS】
var agent = navigator.userAgent; if (agent.indexOf('iPhone') > 0 || agent.indexOf('iPod') > 0 || agent.indexOf('Android') > 0) { var movie = ['(動画URL1)','(動画URL2)','(動画URL3)']; $('.movie .thumb').each(function(i) { $(this).click(function(){ $(this).hide().parent().html('<iframe src="http://www.youtube.com/embed/'+movie[i]+'?rel=0&modestbranding=1&showinfo=0&disablekb=1&autoplay=1&wmode=transparent" width="550" height="309" frameborder="0" allowfullscreen></iframe>'); }); }); }