slontが2016年2月18日に投稿(2016年9月30日更新)

動画の埋め込みが多くてページが重くなるの、困りますよね。そんな時はもういっそ全部画像にしちゃって、クリックされてから動画に置き換えちゃいましょう。次のたった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().parent().html('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+ id +'" frameborder="0" allowfullscreen=""></iframe>');
  });
});

たったこれだけでOK。
試しに23個の動画を埋め込んでいるこのページで試してみたら、当初読み込み完了まで16秒ほどかかっていたのが、1秒ほどまで短くなりました。ぜひお試しあれ。

↑気に入ったらシェアしてね↑
関連記事
プロフィール
slont

slont

元金融エンジニア。メイン言語はJava, HTML, JavaScript, Python, Kotlinあたり。SECCONやCTF、NLP、機械学習に興味あり。金融日記購読4年。巷で話題の変態紳士。美女ソムリエ始めてました。 お仕事の依頼はTwitterからお願いします。

comments powered by Disqus
Back to top