YOU TUBE の読み込みを早くする

YOU TUBE　を複数入れているとページの速度が遅くなります。 対策として、読み込み時は画像で表示。 クリックした時点で動画を読み込む設定をします。

設定方法

htmlはifreamではなく、以下のように書きます。

<img src="読み込み時に表示する画像のURL" data-video="youtubeの共有の埋め込みコードに記載されているsrcのURL部分をここに記載" class="video" alt="">

 

</body>の直前に以下のコードを記載

{literal}<script>
$('img.video').click(function(){
video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="100%" height="200px" ></iframe>';
$(this).replaceWith(video);
});
</script>{/literal}

 

参考サイト：http://blog.psocafe.com/view/2968  

画像にyoutubeのサムネイル画像を使う場合は以下のように記載。

画像のサイズによってURLが変わります。

<!-- 320×180px -->
<img src="http://img.youtube.com/vi/hTWKbfoikeg/mqdefault.jpg" alt="" />

<!-- 480×360px -->
<img src="http://img.youtube.com/vi/youtubeID/0.jpg" alt="" />

<!-- 120×90px -->
<img src="http://img.youtube.com/vi/youtubeID/1.jpg" alt="" />

<!-- 120×90px -->
<img src="http://img.youtube.com/vi/youtubeID/2.jpg" alt="" />

<!-- 120×90px -->
<img src="http://img.youtube.com/vi/youtubeID/3.jpg" alt="" />