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

サイトマップ

ホームページとデザインの会社
株式会社ジェイプラン

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

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="" />

 

印刷はこんなに安かったの?

梅オーナー情報はこちら

おすすめレンタルサーバー

独自SLLが無料!月額100円~使える!使いやすく初心者にお勧め!


ホームページお役立ち情報

記事はありません

お探しの記事は見つかりませんでした。

東京・千葉の中国語教室

中国語教室