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

Page Speed Insights 対策の一環．他の対策は以下を見てください．

• オフスクリーン画像の遅延読み込み
• 次世代フォーマットでの画像の配信
• ウェブフォント読み込み中の全テキストの表示
• 第三者コードの影響を抑えてください

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

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

「youtube 複数 埋め込み 高速化」「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 はこんな感じ．
(2020/04/05 スマホ時に横がはみ出る場合に対応．)
(2020/05/12 縦の長さも横幅を縮小した割合で縮小するように修正．)
(2020/05/21 最大化ボタンを有効化．)
(2020/06/10 自作サムネイルに対応．)

縦長動画のサムネイルにも対応

Youtube のサムネイル画像は自由に変更できるが，個人認証をしないと使えません．
また，標準のサムネイルは問答無用で横長タイプになります．
このライブラリでは縦長動画のサムネイルにも簡単に対応できます．

自動再生

chrome では iframe に allow=”autoplay” をつけないと現状では自動再生になりませんでした．
自動的に autoplay を付加するようにしています．

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

/*
  YouTube 初回表示軽量化スクリプト
  Copyright Rectus Inc, 2020/06/10 Ver 0.06
  株式会社レクタス
 */

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

    // 取りうる最大幅を超えている場合はそこまでにする．
    if (maxWidth < widths[index]) {
      heights[index] = Math.floor(heights[index] * maxWidth / widths[index]);
      widths[index] = Math.floor(maxWidth);
    }
    
    // URL から動画 id のみを取得して文字連結をしてサムネイルを取得
    var id = srcs[index].match(/[\/?=]([a-zA-Z0-9_-]{11})[&\?]?/)[1];
    if (thumbs[index]) {
      images[index] = thumbs[index];
    } else {
      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] + '" allowfullscreen></iframe>');
    });
  });
});

function getAncestorWidth(element) {
  if (element.parent() === undefined) {
    return element.outerWidth(true);
  }
  width = element.parent().outerWidth(true);
  if (width == 0) {
    width = getAncestorWidth(element.parent());
  } else {
    width = element.parent().outerWidth(true);
  }
  return width;
}

CSS はこんな感じ．

ソースはfastyt.css
上記リンクを右クリックして，「ファイルを保存」するとソースが保存される．
(2020/05/11 ご指摘を受けて修正．IE で表示が崩れるところがありました．)

@charset "utf-8";

.yt {
  position:relative;
}
.yt_play {
  position: absolute;
}
.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>

独自のサムネイルを使いたい場合は，iframe の中に data-thumbnail=”サムネイルのURL” のように記述します．(2020/06/10)

埋め込みの一例

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

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

GTMetrix
PageSpeed Insights