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

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
お問い合わせはお気軽に
ノウハウを書籍化!
Pagetop