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秒ほどまで短くなりました。ぜひお試しあれ。