2016.05.25
AK
コメント: 0

1ページに複数のYouTube動画を埋め込んでも重くならない方法

HPに動画を挿入していくと、速度が遅くなり困ったことはありませんか？

僕はセールスページを作成していて6個の動画を差し込んだら表示スピードが遅くなりました。

その時の表示速度が下記です。

speed-before

そこで、色々調べていると、
動画をいくつ差し込んでも重くならない方法がありましたのでシェアします。

<iframe width="動画の横幅" height="動画の縦幅" src="https://www.youtube.com/embed/動画ID" frameborder="0" allowfullscreen></iframe>

上記のコードはパラメータはつけていますが、youtubeから公式で取得できるコードです。

<img src="画像URL" width="動画の横幅" height="動画の縦幅" data-video="https://www.youtube.com/embed/4動画ID?rel=0&amp;modestbranding=1&amp;showinfo=0&amp;autoplay=1" frameborder="0" allowfullscreen>

これで読み込み時は画像として認識されるので、重くなりません。

しかし、これだけでは画像としてしか認識しないので、クリックしたら動画が再生させるスクリプトを上記よりも後に記述します。
まあ、タグの手前くらいがいいでしょう。

script type="text/javascript">// <![CDATA[
$('img').click(function(){
video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="799" height="449"></iframe>';
$(this).replaceWith(video);
});
// ]]></script>

このスクリプトにより、画像をクリックするとYouTubeの動画が表示されます。

よしできた！では表示スピードはどれだけ改善されたかというと・・・

speed-after