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

2019年10月29日 HTML&CSS

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

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

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

高速化の方法は二つ

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

参考にしたページは前者の方法だと,
【デモあり】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