BLOG

ブログ

programming

2019.05.22

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

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

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

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

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

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

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

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

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

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

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

1	`<img` `src="//i.ytimg.com/vi/YouTube動画のID/mqdefault.jpg"` `alt="">`

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

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

■デモ

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

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

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

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

■デモのコード

<!-- CSS読み込み -->
<link rel="stylesheet" href="./css/magnific-popup.css">
 
<!-- 動画のリンク、サムネイル呼び出し -->
<p class="md_iframe_image">
    <a href="//www.youtube.com/watch?v=YouTube動画のID" class="md_popup-iframe">
        <img src="//i.ytimg.com/vi/YouTube動画のID/mqdefault.jpg" alt="">
    </a>
</p>
 
<!-- jQueryの読み込み -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js" async=""></script>
<script>
    $(window).on('load', function(){
        $('.md_popup-iframe').magnificPopup({
            type: 'iframe',
            mainClass: 'mfp-fade',
            removalDelay: 200,
            preloader: false
        });
    });
</script>

.md_iframe_image {
    background: #fff;
}
.md_iframe_image a {
    border: 2px solid #fff;
    display: block;
    position: relative;
}
.md_iframe_image a:hover {
    opacity: 0.6;
}
.md_iframe_image a::before {
    background: url(サムネイルに重ねる動画再生ボタンの画像) center center / 64px 64px no-repeat;
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    margin: -32px auto 0;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 1;
}
.md_iframe_image a img {
    width: 100%;
}