ブログBLOG

WebサイトにYouTubeの動画を大量に埋め込んでも重くならないようにする方法

こんにちは、ティウェブ藤園です。

動画を埋め込んだWebサイトをよく見かけるようになりました。

Webサイトに動画を埋め込むにあたっては、
YouTubeに動画をアップして、それをWebサイトに
表示させる方法がよく使われている手法と思います。

ですが先日、1ページに80個以上(!)の
YouTube動画を一覧化して埋め込む案件があり、
加えてスマートフォンサイトということで、
いかに軽量化するかを考える必要がありました。

※ちなみに、80個以上のYouTube動画を
通常の埋め込み方法であるiframeタグの貼り付けで行うと、
ページが重すぎて読み込みエラーとなり、ページ自体が表示されませんでした。。。

■動画のサムネイル画像を使う

実は、YouTubeはサムネイル画像は簡単に取得できることをご存知でしょうか?

– サムネイル画像呼び出し例

– サムネイル画像を埋め込むコード

「YouTube動画のID」は、
アップロードした動画の再生ページのURLの末尾、
「watch?v=XXXXXXXXXX」の、「v=」の後の英数字を入れてください。

※今回使用している「mqdefault」は320px×180pxサイズの画像です。

はじめはサムネイル画像だけを表示し、
ユーザーが再生したい動画を選択してはじめて動画データを読み込むようにすれば、
遅延読み込みよりも手軽に1ページのデータ量を軽量化することができます。

■デモ

実際にサムネイル画像を埋め込み、
クリックした際に動画を読み込む形にした例を記載します。

一見して、通常のiframeの埋め込みと差異はないように見えますが、
実際は動画のサムネイル画像のみを読み込んで、
その上に再生ボタンの画像を重ねただけの形となっています。

サムネイル画像から直接YouTubeにリンクする形でも問題はありませんが、
今回はWebサイトからの離脱を防ぐため、jQueryを使用してページ内でモーダルが開く形にしています。

※jQueryのモーダル系プラグイン「Magnific Popup」
https://dimsemenov.com/plugins/magnific-popup/

■デモのコード

■まとめ

回線環境もずいぶん進化しており、重いWebサイトでも
それなりに表示されるようにはなってきていますが、
やはり動画となるとなかなかページが読み込まれずにイライラ……
ということも少なくないかと思います。

スムーズに表示されないページはユーザーの離脱率も高くなります。
ティウェブではこういった手法をはじめ、お客様によりよいWebサイトを
提供できるよう日々、研究や工夫を重ねています。