Youtube等の動画の埋め込みでページが重くなる時に使えるスクリプト
動画の埋め込みが多くてページが重くなるの、困りますよね。そんな時はもういっそ全部画像にしちゃって、クリックされてから動画に置き換えちゃいましょう。次のたった2つのステップで簡単にできちゃいます。
1. 埋め込み動画を画像に置き換える
<iframe width="560" height="315" src="https://www.youtube.com/embed/XNtTEibFvlQ" frameborder="0" allowfullscreen></iframe>
こうだったのを
<img src="https://i.ytimg.com/vi/XNtTEibFvlQ/sddefault.jpg" class="youtube">
こうする。
2. 画像クリック時に自動で動画に変換
以下をbody内の最後の方に追加する。
$(function (){
$(".youtube").click(function (e) {
// 画像のsrcを取得
var y_img = $(this).attr("src");
// 動画IDを抽出
var id = y_img.slice(23, y_img.lastIndexOf("/") + 0);
// 画像をiframeに置き換え
$(this).hide().after('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+ id +'" frameborder="0" allowfullscreen="" style="max-width: 100%;"></iframe>');
});
});
たったこれだけでOK。
試しに23個の動画を埋め込んでいるこのページで試してみたら、当初読み込み完了まで16秒ほどかかっていたのが、1秒ほどまで短くなりました。ぜひお試しあれ。