Youtube の動画を複数埋め込みしたページの高速化

2019年10月29日 HTML&CSS

Youtube の複数の動画を埋め込むとページ自体が非常に遅くなる(重い)時の高速化の方法．

原因は iframe で各動画を読み込みに行くため．

「youtube 複数埋め込み高速化」で検索すると説明してくれているページが多数見つかる．

高速化の方法は二つ

やり方としては大きく二つあって，

最初から iframe を使わないように記述し，クリックで iframe にする方法
ソースはいじらず，一旦，動画(iframe)をサムネイル(img)に変更しておいて，クリックされたときにまた，iframe に戻す方法

参考にしたページは前者の方法だと，
【デモあり】YouTubeの読み込みを軽くする！複数動画埋め込みページを高速化

後者の方法だと
YouTube動画の埋め込みを軽くする

どちらも分かりやすいので，どちらも試してみたところ，当然ながら体感ではどちらも速くなる．

PageSpeed Insights で計測するとパソコンの方で後者が遅くなる．
chrome の開発者ツールの Network で見てみると，後者の方法は iframe の部分が pending となっている．どうやら途中までは読み込んでいるようだ．

つまり，出来るだけ高速を目指すなら，前者の方法で最初から iframe は書き替えておく方がよいようだ．

ただし，それだと既存のサイトに多数の youtube を埋め込んでいる場合に面倒．
よって，出来るだけ変更作業の負担を軽くする方法はないかを考えると，src やめればいいんじゃないかと気が付いた．
しかし，既に気づいていた先人のサイトを見つけた．

埋め込みyoutubeが想像以上に戦犯級だった件
src を data-src に代えていた．これがいい．

これらの良いところを使わせてもらって作ってみた．

できるだけ Youtube に似せる

先ほどのサイトでは fontawesome を使っているので，再生ボタンが明らかにYoutube のそれと違う．

そこで，YouTube動画の埋め込みを軽くするのページで見つけたYouTube ブランドの使用についてからアイコンをダウンロードしてきて，出来るだけ本物に近づけることにした．

ソース

上記リンクサイトからいろいろ頂いて作っています．
javascript はこんな感じ．

chrome では iframe に allow=”autoplay” をつけないと現状では自動再生になりませんでした．

ソースはfastyt.js
上記リンクを右クリックして，「ファイルを保存」するとソースが保存される．
普通に左クリックすればソースを見ることが出来ます．

$(function (){
  var srcs = [];
  var images = [];
  var heights = [];
  var widths = [];

  // 全てのiframeタグに対して処理を実行
  $('iframe.fastyt').each(function(index, element) {
    // 属性を配列に格納
    srcs[index] = $(this).attr('data-src');
    heights[index] = $(this).attr('height');
    widths[index] = $(this).attr('width');

    // URL から動画 id のみを取得して文字連結をしてサムネイルを取得
    var id = srcs[index].match(/[\/?=]([a-zA-Z0-9_-]{11})[&\?]?/)[1];
    images[index] = '//img.youtube.com/vi/' + id + '/mqdefault.jpg';

    // iframeをサムネイル画像に置換
    $(this).after('<div class="yt"><div class="yt_play"><img src="' + images[index] + '" class="movie" width="' + widths[index] + '" height="' + heights[index] + '"></div></div>').remove();
    $('.yt').eq([index]).css("width", widths[index]);
    $('.yt').eq([index]).css("height", heights[index]);
  });
  
  $('.yt_play').each(function(index, element) {
    // サムネイルがクリックされた時の処理
    $(this).click(function (){
      // iframeに置換
      var autoplay;
      if (0 < srcs[index].indexOf("?")) {
        autoplay = '&';
      } else {
        autoplay = '?';
      }
      autoplay += "autoplay=1";

      $(this).replaceWith('<iframe src="' + srcs[index] + autoplay + '" allow="autoplay" frameborder="0" width="' + widths[index] + '" height="' + heights[index] + '"></iframe>');
    });
  });
});

CSS はこんな感じ．

ソースはfastyt.css
上記リンクを右クリックして，「ファイルを保存」するとソースが保存される．

@charset "utf-8";

.yt {position:relative;}

.yt_play:hover {cursor:pointer;}

.yt_play::before { /* YouTubeアイコン */
  position: absolute;
  background: url(/images/yt_icon_mono_light.png);
  content: "";
  background-size: 100%;
  width: 70px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform : translate(-50%,-50%);
  opacity: .90;
  transition:.5s;
}

.yt_play:hover::before { /* YouTubeアイコン */
  cursor: pointer;
  background-image:url(/images/yt_icon_rgb.png);
}

再生ボタンのアイコンは youtube からダウンロードしてきた

/images/yt_icon_rgb.png
赤の再生ボタン

/images/yt_icon_mono_light.png
灰色背景の再生ボタン

を使っています．

javascript と css は自分の環境に合わせて変えて下さい．
あと，jQuery(google) 必須です．

iframe で width と height を入れ，class で fastyt を指定してください．

埋め込み方法

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/js/fastyt.js" type="text/javascript"></script>
<link href="/css/fastyt.css" rel="stylesheet" type="text/css">
<iframe class="fastyt" data-src="//www.youtube.com/embed/動画ID" width="300" height="169"></iframe>

埋め込みの一例

埋め込み例(youtube最初の動画)

速度(スピード)測定サイト

GTMetrix
PageSpeed Insights