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

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

設定方法

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

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

1	<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}

1 2 3 4 5 6

{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が変わります。