Zenn
▶️

YouTube動画を高速に埋め込むならYouTubeEmbed！ただしiOSでは注意が必要

に公開
Next.js
React
YouTube
パフォーマンス改善
webパフォーマンス
tech

YouTube動画をWebページに埋め込むとき、PageSpeed Insightsでスコアが低くなりがちです。

※以下のような感じで警告が出ると思います。

この問題を解決するには、以下の条件を満たす必要があります。

  • 初期表示時にスクリプトを読み込まず、サムネイルと再生ボタンだけ表示する
  • 再生ボタンが押されたタイミングで初めてスクリプトを読み込む

これを満たすライブラリは存在します。
@next/third-partiesで提供されている、YouTubeEmbedです。

今回はYouTubeEmbedの基本的な使い方と注意点についてまとめます。

YouTubeEmbedの使い方

import { YouTubeEmbed } from "@next/third-parties/google";

export default function Page() {
  return (
    <main style={{ padding: "2rem" }}>
      <h1>Love yourself!</h1>
      <YouTubeEmbed videoid="52cSFrjnImQ" height={400} params="controls=1" />
    </main>
  );
}

上記のように、YouTubeEmbedコンポーネントにパラメータを指定するだけで簡単に使えます。
指定できるパラメータについて、以下に簡単にまとめておきます。

※videoidのみ必須です。指定しないと、どんな動画を埋め込みたいのか分からないので、、、

パラメータ 役割 備考
height 高さを指定 単位はピクセル。省略時はデフォルトサイズで表示される。
width 幅を指定 単位はピクセル。省略時は自動で幅調整される。
videoid 埋め込むYouTube動画のID（必須）を指定 YouTubeのURLのクエリパラメータvに指定されている文字列（例: https://www.youtube.com/watch?v=52cSFrjnImQ の場合、52cSFrjnImQ）
playlabel アクセシビリティ用のラベル 音声読み上げ対応。動画の再生ボタンに対して付加される説明テキスト（例: "動画を再生" など）
params YouTubeの埋め込みパラメータをクエリ形式で指定 例: autoplay=1&mute=1&controls=0。実際のブラウザで自動再生を有効にしたい場合、音声をミュートする mute=1 を一緒に指定しないと無効化されるケースが多いです。
style iframe要素に適用するインラインスタイル CSS文字列形式で指定（例: "border-radius: 10px;"）

肝心のパフォーマンスについてですが、開発者ツールのネットワークタブで、
PageSpeed Insightsで槍玉に上がったスクリプトを検索しても引っかからなくなっており、
初期表示時のパフォーマンスの改善に寄与していることがわかります。

YouTubeEmbedを使う上での注意点

iOS端末（iPhone・iPad）では、次のような問題が発生します。

  • 再生ボタンを1回タップしても、動画が再生されず
  • 2回タップしないと再生が始まらない（ダブルタップ問題。1回目のタップでiframeを読み込み、2回目のタップで再生されるような挙動をする）

この問題は以下のIssueで報告されています。

このUXの悪化により、私の所属するプロジェクトでは採用を見送ることになりました。

実装する側でこの問題を乗り越えようと実装するというのも1つの手として考えられると思いますが、
ライブラリ側のアップデートによって前提が崩れてうまく動作しなくなるリスクを考えると、
取るべき選択肢は以下の2つのうちのどちらかだと思います。

  • issueが立っているので、今後のライブラリのアップデートを待つ
  • 自らPRを作って解決し、OSSコミッターになる（不具合の改善を通じてコントリビューションする良い機会にもなるかと思います）

Discussion