©2022- web-developer-note.com

【JavaScript】YouTube埋め込みページを高速化する方法｜jQueryのみで複数動画対応

【JavaScript】YouTube埋め込みページを高速化する方法｜jQueryのみで複数動画対応

ウェブサイトにYouTube動画を埋め込むことは、コンテンツを豊かにし、ユーザーのエンゲージメントを高める効果的な方法です。しかし、複数のYouTube動画を一度に埋め込むと、ページの読み込み速度が遅くなり、ユーザー体験に悪影響を及ぼす可能性があります。本記事では、jQueryのみでYouTube埋め込みページを高速化し、複数の動画に対応する方法を具体的なコード例とともに詳しく解説します。

YouTube埋め込みによるページ速度への影響

YouTube動画を埋め込む際、通常は<iframe>タグを使用します。これは便利な方法ですが、以下の理由でページの読み込み速度に影響を与える可能性があります。

  • リソースの多重読み込み: 各<iframe>はYouTubeのサーバーから追加のリソース（JavaScript、CSS、画像など）をロードします。これにより、ページ全体の読み込みが遅くなります。
  • 初期ロード時間の増加: 多数の動画を一度に埋め込むと、初期ロード時間が長くなり、ユーザーがページにアクセスした際の待ち時間が増加します。

これらの問題を解決するためには、動画の埋め込み方法を工夫し、必要な時にのみリソースをロードする仕組みを導入することが重要です。

高速化のためのアプローチ

ページの読み込み速度を向上させるために、以下のアプローチを採用します。

  1. サムネイル画像の使用: 初期表示では動画のサムネイル画像のみを表示し、ユーザーが再生ボタンをクリックした際に<iframe>を動的に生成します。これにより、初期ロード時のリソース消費を削減します。
  2. 遅延読み込み（Lazy Loading）の実装: ユーザーの操作に応じて動画を読み込むことで、不要なリソースのロードを防ぎます。
  3. 複数動画への対応: 一つの方法で複数の動画を効率的に扱うことで、コードの再利用性と管理のしやすさを向上させます。

以下では、これらのアプローチを具体的なコード例とともに実装していきます。

CodePen ソースコードサンプル

具体的な実装方法

HTML構造の作成

まず、YouTube動画を表示するためのHTML構造を作成します。以下のコードは、複数のYouTube動画を効率的に管理するための基本的な構造です。

<ul class="youtube">
  <li>
    <div class="youtube__container" data-video-id="hQN45euU6_I">
      <img class="youtube__thumbnail" src="https://img.youtube.com/vi/hQN45euU6_I/maxresdefault.jpg" alt="動画タイトルを入れてください" width="実寸を入れてください" height="実寸を入れてください" loading="lazy" class="imgauto">
    </div>
  </li>
  <li>
    <div class="youtube__container" data-video-id="yj_RT7epy_M">
      <img class="youtube__thumbnail" src="https://img.youtube.com/vi/yj_RT7epy_M/maxresdefault.jpg" alt="動画タイトルを入れてください" width="実寸を入れてください" height="実寸を入れてください" loading="lazy" class="imgauto">
    </div>
  </li>
  <li>
    <div class="youtube__container" data-video-id="K3oNkdMu_ew">
      <img class="youtube__thumbnail" src="https://img.youtube.com/vi/K3oNkdMu_ew/maxresdefault.jpg" alt="動画タイトルを入れてください" width="実寸を入れてください" height="実寸を入れてください" loading="lazy" class="imgauto">
    </div>
  </li>
  <li>
    <div class="youtube__container" data-video-id="05NmZfZNFMw">
      <img class="youtube__thumbnail" src="https://img.youtube.com/vi/05NmZfZNFMw/maxresdefault.jpg" alt="動画タイトルを入れてください" width="実寸を入れてください" height="実寸を入れてください" loading="lazy" class="imgauto">
    </div>
  </li>
</ul>

解説:

  • ２箇所のhQN45euU6_Iはyoutube動画のIDです
  • aタグにdata-lity属性を付与することで、クリック時にポップアップが開きます。

youtube動画のIDはアドレスバーの末尾にあります。

使用しているリセットクラスについて:

imgauto

当ブログではimgタグに対して以下のリセットを行っております。

img{
	height: auto;
	max-width: 100%;
	box-sizing: unset;
	vertical-align: bottom;
}
.imgauto{
	height: auto;
	width: 100%;
	box-sizing: unset;
	line-height: 1rem;
	display: block;
}

CSSのスタイリング

次に、動画サムネイルと再生ボタンをスタイリングするためのCSSを適用します。

.youtube{
  display: grid;
  margin-inline: auto;
}
.youtube__container{
  position: relative;
}
.youtube__container img,
.youtube__container iframe{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
.youtube__container::before{
  content: "";
  display: inline-block;
  background: #fff;
  aspect-ratio: 197/150;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.youtube__container::after{
  content: '';
  display: inline-block;
  --MASK: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuODrOOCpOODpOODvF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDM5MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDM5MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRjAwMDA7fQo8L3N0eWxlPgo8ZyBpZD0i44Os44Kk44Ok44O8XzFfMDAwMDAwNzQ0MDA4NzMyNzkxMzU5NDUyNDAwMDAwMDY2OTQ1NTcxMzQ4ODYzMzkyMjNfIj4KCTxnIGlkPSJfMiI+CgkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTQ4Mi43LDM3LjhDNDU2LjUsMTYuNiwzNjQsMCwyNTYsMFM1NS41LDE2LjYsMjkuMywzNy44QzUuMiw1Ny4yLDAsMTQ1LjEsMCwxOTVzNS4yLDEzNy44LDI5LjMsMTU3LjIKCQkJQzU1LjUsMzczLjQsMTQ4LDM5MCwyNTYsMzkwczIwMC41LTE2LjYsMjI2LjctMzcuOEM1MDYuOCwzMzIuOCw1MTIsMjQ0LjksNTEyLDE5NVM1MDYuOCw1Ny4yLDQ4Mi43LDM3Ljh6IE0zMzIuOCwxOTcuNEwyMTQsMjY4LjMKCQkJYy0wLjksMC41LTEuOSwwLjUtMi44LDBjLTAuOS0wLjUtMS40LTEuNC0xLjQtMi40VjEyNC4xYzAtMSwwLjUtMS45LDEuNC0yLjRjMC45LTAuNSwxLjktMC41LDIuOCwwbDExOC44LDcwLjkKCQkJYzAuOCwwLjUsMS40LDEuNCwxLjQsMi40QzMzNC4yLDE5NiwzMzMuNywxOTYuOSwzMzIuOCwxOTcuNHoiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K) no-repeat center center / 100%;
  mask: var(--MASK);
  -webkit-mask: var(--MASK);
  background-color: #FF0000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 197/150;
}
.youtube__container.is-play::before,
.youtube__container.is-play::after{
  display: none;
}
@media (hover: hover) {
  .youtube__container:hover{
    cursor: pointer;
  }
  .youtube__container::after{
    transition: .3s;
  }
  .youtube__container:hover::after{
    background-color: #4B4B4B;
  }
}
@media screen and (min-width: 768px){
  .youtube{
    width: 80%;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 30px;
  }
  .youtube__container::before {
    width: 50px;
  }
  .youtube__container::after {
    width: 90px;
  }
}
@media screen and (max-width: 767px){
  .youtube{
    width: 90%;
    gap: 25px;
  }
  .youtube__container::before {
    width: 30px;
  }
  .youtube__container::after {
    width: 60px;
  }
}

ポイント

  • .youtube__container::afterに視覚的な再生ボタンを設置し、再生できることをわかりやすくします。
  • Data URIアイコンについては以下の記事を御覧ください。
Data URIを使ってSVGアイコンを軽量化する方法

Data URIを使ってSVGアイコンを軽量化する方法

ウェブデザインにおいて、アイコンはユーザーインターフェースの視覚的な魅力と機能性を高める重要な要素です。特に、SVG（Scalable Vector Graphics）は、その拡張…

JavaScriptによるインタラクション

jQueryの設置

下記jsはjQueryに依存するため、ライブラリを先に設置してください・

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Youtube動画発火スクリプト

サムネイル画像をクリックした際にYouTube動画を動的に埋め込むためのJavaScriptを実装します。

$(document).ready(function(){
  $('.youtube__container').on('click', '.youtube__thumbnail', function(){
      const youtubeContainer = $(this).closest('.youtube__container');
      const youtubeVideoId = youtubeContainer.data('video-id');
      const youtubeIframe = $('<iframe>', {
          src: 'https://www.youtube.com/embed/' + youtubeVideoId + '?autoplay=1',
          frameborder: '0',
          allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
          allowfullscreen: true
      });
      $(this).replaceWith(youtubeIframe);
      youtubeContainer.addClass('is-play');
  });
});

解説:

  • イベントリスナーの設定: .youtube__container内の.youtube__thumbnailがクリックされた際にイベントをトリガーします。
  • 動画IDの取得: data-video-id属性から対象のYouTube動画IDを取得します。
  • <iframe>の生成と埋め込み: 取得した動画IDを使用して、YouTubeの埋め込みURLを生成し、<iframe>を動的に作成します。?autoplay=1パラメータにより、動画が自動再生されます。
  • サムネイル画像の置き換え: クリックされたサムネイル画像を生成した<iframe>で置き換えます。
  • 再生中のスタイル適用: is-playクラスを追加し、再生ボタンとアイコンを非表示にします。

複数動画への対応

サンプルコードは、複数のYouTube動画に対応可能です。各動画コンテナにはdata-video-id属性が設定されており、この属性を利用して個別の動画を動的にロードします。この方法により、任意の数の動画を効率的に管理・表示することができます。

追加方法:

  • 動画の追加: 新しい動画を追加する際は、<li>要素内に新しい.youtube__containerを追加し、data-video-id属性に該当する動画IDを設定します。
  • コードの再利用性: JavaScriptコードは全ての.youtube__containerに対して適用されるため、個別の設定や追加のスクリプトは不要です。

よくある問題と解決策

問題1: 動画が正しく再生されない

原因:

  • data-video-id属性に誤った動画IDが設定されている。
  • YouTube動画の埋め込み設定が無効になっている。

解決策:

  • 各.youtube__containerのdata-video-id属性に正しい動画IDを設定しているか確認します。
  • YouTube動画の設定で「埋め込みを許可」に設定されていることを確認します。

問題2: サムネイル画像が表示されない

原因:

  • サムネイル画像のURLが誤っている。
  • 画像ファイルが存在しない、またはアクセスできない。

解決策:

  • <img>タグのsrc属性に正しいサムネイル画像のURLを設定します。
  • 画像ファイルが正しくアップロードされ、アクセス可能であることを確認します。

問題3: JavaScriptが動作しない

原因:

  • jQueryが正しくインクルードされていない。
  • JavaScriptコードにエラーがある。

解決策:

  • jQueryライブラリがHTMLファイルに正しくインクルードされているか確認します。
  • ブラウザのデベロッパーツールを使用して、JavaScriptエラーを特定し修正します。

まとめ

YouTube動画の埋め込みは、ウェブサイトに豊富なコンテンツを提供する一方で、ページのパフォーマンスに影響を与える可能性があります。本記事では、jQueryのみでYouTube埋め込みページを高速化し、複数の動画に対応する方法を具体的なコード例とともに解説しました。

主なポイント:

  • サムネイル画像の使用: 初期表示では動画のサムネイルのみを表示し、クリック時に<iframe>を動的に生成することで、初期ロードのリソース消費を削減。
  • 遅延読み込みの実装: loading="lazy"属性を活用し、画像の遅延読み込みを実現。
  • 複数動画への対応: 提供されたHTML構造とJavaScriptコードを使用して、任意の数のYouTube動画を効率的に管理・表示。

これらの方法を実装することで、ウェブサイトの読み込み速度を向上させ、ユーザー体験を改善することができます。ぜひ、この記事で紹介した手法を参考にして、YouTube動画の埋め込みページを高速化してください。

この記事をシェアする
JavaScriptの一覧を見る

どなたでもコメントや質問をどうぞ

スパム対策のため、承認作業を行うまでは表示されません。ご了承ください。

CAPTCHA


関連記事