Youtube等の動画の埋め込みでページが重くなる時に使えるスクリプト

SEO 2月 18, 2016

動画の埋め込みが多くてページが重くなるの、困りますよね。そんな時はもういっそ全部画像にしちゃって、クリックされてから動画に置き換えちゃいましょう。次のたった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秒ほどまで短くなりました。ぜひお試しあれ。

slont

金融ベンチャーでWebエンジニア。美と酒とTechで生きてる。Vue.jsが至高。Elixir好き。個人事業とWebアプリ案件もやってます。 アプリ→https://app.cullet.me Android→https://play.google.com/store/apps/details?id=net.maytry.cullet.android

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.