YOU TUBE を複数入れているとページの速度が遅くなります。 対策として、読み込み時は画像で表示。 クリックした時点で動画を読み込む設定をします。
設定方法
htmlはifreamではなく、以下のように書きます。
1 <img src="読み込み時に表示する画像のURL" data-video="youtubeの共有の埋め込みコードに記載されているsrcのURL部分をここに記載" class="video" alt="">
</body>の直前に以下のコードを記載
123456 {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が変わります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- 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="" /> |