Reactで動画を埋め込む方法

ReactアプリでVideoを埋め込むのは一見シンプルに思えますが、autoplayが動作しない、iframeがレスポンシブにならない、<embed> タグがうまく機能しないといった問題に直面しがちです。本ガイドでは、最も実用的な2つのアプローチを紹介します。すなわち、自己ホスト型ファイル向けのネイティブHTML5 <video> 要素と、YouTubeやVimeoなどのプラットフォーム向けの <iframe> 埋め込みです。サードパーティ製ライブラリは、デフォルトではなく、本当に価値を発揮する場面でのみ言及します。

方法1: 自己ホスト型ファイルのためのReactにおけるHTML5 Video

動画ファイルを自分で管理しているのであれば、ネイティブの <video> 要素が最適なツールです。ライブラリは不要です。

import myVideo from './assets/demo.mp4';

export default function VideoPlayer() {
  return (
    <video
      width="100%"
      style={{ aspectRatio: '16/9' }}
      controls
      playsInline
      muted
    >
      <source src={myVideo} type="video/mp4" />
      <track
        kind="subtitles"
        src="/captions/demo.en.vtt"
        srcLang="en"
        label="English"
        default
      />
      Your browser does not support the video tag.
    </video>
  );
}

押さえておきたいポイントをいくつか挙げます。

• autoPlay を確実に動作させるには muted が必要 です。Chrome、Safari、Firefoxはいずれも、ミュートされていないautoplayをデフォルトでブロックします。muted なしで動作すると思い込まないようにしましょう。なお、JSXではこの属性はキャメルケースで autoPlay と記述し、autoplay ではありません。ブラウザのサポート状況とautoplayポリシーは Can I Use に記載されています。
• playsInline は、iOSで動画が自動的にフルスクリーンで開くのを防ぐために必要です。
• <track> はキャプションや字幕を追加します。動画コンテンツのアクセシビリティを担保する正しい方法であり、見落としやすい部分でもあります。
• <video> 内のフォールバックテキストは、要素を認識しない非常に古いブラウザでのみ表示されます。それでも記載しておく価値はあります。

HLS (.m3u8) のような アダプティブストリーミング形式 については、ブラウザのネイティブサポートは異なります。SafariはHLSをネイティブで処理できますが、ChromeとFirefoxではストリームを解析・再生するために hls.js のようなライブラリが必要です。

ReactでのYouTube埋め込み: iframeを使用する

YouTubeやVimeoの場合は、<iframe> が標準的なアプローチです。これにReact専用パッケージは必要ありません。

export default function YouTubeEmbed({ videoId }) {
  return (
    <div style={{ aspectRatio: '16/9', width: '100%' }}>
      <iframe
        width="100%"
        height="100%"
        src={`https://www.youtube-nocookie.com/embed/${videoId}`}
        title="YouTube video player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen
        style={{ border: 'none' }}
      />
    </div>
  );
}

主なポイント:

• 埋め込みURLには youtube.com ではなく youtube-nocookie.com を使用 します。これはYouTubeのプライバシー強化モードで、ユーザーがプレーヤーを操作するまでトラッキングクッキーを抑制します。
• iframeにはスクリーンリーダーのために title が必須 です。これがないと、支援技術が埋め込みコンテンツを説明する手段を失います。
• ラッパーに aspectRatio: '16/9' を指定し、iframeに width: 100% と height: 100% を設定するのが、モダンCSSを用いた最もクリーンなレスポンシブ手法です。paddingハックは不要です。CSSの aspect-ratio プロパティのブラウザサポート状況は Can I Use で確認できます。
• 埋め込みURLの形式は https://www.youtube-nocookie.com/embed/{VIDEO_ID} です。動画IDは、標準的なYouTube URLの v クエリパラメータの値です(例えば youtube.com/watch?v=VIDEO_ID の ?v= の後の部分)。

クエリ文字列で追加パラメータを渡すことができます:

/embed/VIDEO_ID?controls=1&rel=0

React Video Playerライブラリを使うべきタイミング

ほとんどのユースケースでは、ネイティブの <video> 要素や素のiframeで十分です。複数のプラットフォーム(YouTube、Vimeo、Wistia、HLS、DASH)を統一APIを持つ単一コンポーネントでサポートする必要がある場合、または異なるプロバイダー間で onReady、onProgress、onEnded といったイベントコールバックが必要な場合は、ReactPlayer のようなライブラリを検討してください。

ReactPlayerはバンドルサイズに無視できない影響を与えるため、依存関係として追加する前に、その柔軟性が本当に必要かを評価する価値があります。

まとめ

まずは最もシンプルに動作するツールから始めましょう。自己ホスト型動画なら、HTML5 <video> 要素に controls、playsInline を付け、autoplayが必要なら muted を加えます。ReactでのYouTube埋め込みなら、youtube-nocookie.com を指し、適切な title 属性を持つ素の <iframe> で十分です。ライブラリは、ネイティブのアプローチでは本当に対応しきれない場合にのみ採用してください。

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.