WebサイトにYouTube動画を埋め込むことは、訪問者に対して情報を視覚的に提供し、コンテンツの魅力を高めるために非常に重要です。この記事では、YouTube動画のWebサイトへの埋め込み方法について詳しく説明し、音声オンで自動再生させる手順までご紹介します。

YouTube

全体（4ページ）の目次を開閉

YouTube動画をWebサイトに埋め込む方法
- 埋め込みの基本手順
  - 1. YouTubeから埋め込みコードを取得
  - 2. Webサイトにコードを貼り付け
- カスタマイズオプション（プロパティ）
カスタマイズオプション（パラメータ）
YouTube動画のWebサイト統合とJavaScriptによる制御
- IFrame Player APIの完全ガイド：
  - エンドユーザーの要件
    - プレーヤーのビューポート
    - IFrame APIをWebページで使うために必要な、JavaScriptコード
      - 主な設定値
  - IFrame Player APIの完全ガイド - 出力例
IFrame Player APIを制御し、音声オンによる自動再生を実装する

YouTube動画をWebサイトに埋め込む方法

Page.1 Contents

YouTube動画をWebサイトに埋め込む方法
- 埋め込みの基本手順
  - 1. YouTubeから埋め込みコードを取得
  - 2. Webサイトにコードを貼り付け
- カスタマイズオプション（プロパティ）

埋め込みの基本手順

まずはYouTube動画をWebサイトに埋め込む基本的な手順について、ご説明します。

1. YouTubeから埋め込みコードを取得

　1. 埋め込みたいYouTube動画のページにアクセスします。
　2. 動画の下にある「共有」ボタンをクリックします。
　3. 表示された共有オプションから「埋め込む」を選択します。

※ショート動画では画面を直接右クリックで選択[クリックで拡大]

　4. 埋め込みコードが表示されるので、コード全体を選択してコピーします。

2. Webサイトにコードを貼り付け

Webサイトの管理画面にログインし、動画を表示させたい場所にアクセスします。
HTMLエディタを使用して、<iframe>タグを挿入します。以下はデフォルトの貼り付けコードを展開したものです。

<iframe
 width="480"
 height="270"
 src="https://www.youtube.com/embed/動画のID"
 title="動画のタイトル"
 frameborder="0"
 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 allowfullscreen
></iframe>

Output

このコードにおいて、「動画のID」の部分には、先ほどコピーした埋め込みコードに含まれていた動画IDが挿入されています。この値が各動画のユニーク値となっています。

カスタマイズオプション（プロパティ）

WebサイトにYouTube動画をiframeで埋め込む際に設定できる、カスタマイズオプションについてご紹介します。これらのオプションを理解することで、動画をWebページに最適な方法で表示できます。

カスタマイズできるオプションは大きく分け２種類あります。外観など状態を示すプロパティと、URL末尾に追記して関数の動作を制御するパラメータです。

まずはプロパティのチップスを見ていきましょう指定された属性の説明と追加の属性も提供します。

src（必須）: YouTubeビデオの埋め込みURL。例: src="https://www.youtube.com/embed/VIDEO_ID"

width: ビデオプレーヤーの幅をピクセル単位で指定します。例: width="560"

height: ビデオプレーヤーの高さをピクセル単位で指定します。例: height="315"

widthとheight属性を使用して、埋め込んだ動画のサイズを調整できます。これにより、Webサイトに最適な動画サイズを設定できます。たとえば、width="560" height="315"のように設定します。
YouTubeのリファレンスでは最低でも200px x 200pxサイズ、プレーヤーにコントロールが表示される場合はビューポートを最小サイズより小さくしなくてもコントロールが表示されるよう、少なくとも幅480ピクセル、高さ270ピクセルの、アスペクト比16:9のプレーヤーを推奨しています。

frameborder: ビデオプレーヤーの周りにフレームを表示するかどうかを指定します。frameborder="0"でフレーム非表示。

allow: 埋め込まれたYouTubeビデオに許可する機能を指定します。以下は一般的な設定です。

accelerometer: 加速度計へのアクセスを許可します。
autoplay: 自動再生を許可します。
clipboard-write: クリップボードへの書き込みを許可します。
encrypted-media: 暗号化されたメディアへのアクセスを許可します。
gyroscope: ジャイロスコープへのアクセスを許可します。
picture-in-picture: ピクチャー・イン・ピクチャー表示を許可します。
web-share: Webシェア機能を許可します。

allowfullscreen: フルスクリーンモードを許可します。ビデオを全画面で表示できるようにします。

さらにそれぞれを詳しく解説します。これらの機能は、埋め込まれたYouTubeビデオがウェブページ内で正しく動作し、ユーザーエクスペリエンスを向上させるために使用できる許可（権限）を提供します。

accelerometer（加速度計へのアクセス）:
- この権限を有効にすると、ビデオプレーヤーがデバイスの加速度計にアクセスし、デバイスの物理的な傾きを検出できます。これは、一部のモバイルデバイスでのビデオ再生中にビデオプレーヤーの方向を調整するのに役立ちます。
autoplay（自動再生）:
- このオプションを設定すると、YouTubeビデオが自動的に再生されます。ただし、一部のブラウザでは自動再生がブロックされることがあります。ユーザーエクスペリエンスを向上させるためには、ユーザーの操作に基づいて再生を開始することを検討することが重要です。
clipboard-write（クリップボードへの書き込み）:
- この権限を許可すると、ビデオ再生中にユーザーがクリップボードにテキストやリンクなどのデータを書き込むことができます。これは、シェアボタンなどの機能で共有リンクをコピーする際に使用されます。
encrypted-media（暗号化されたメディアへのアクセス）:
- この権限を有効にすると、ビデオプレーヤーがHTTPS接続を介して暗号化されたメディアコンテンツにアクセスできます。これにより、セキュリティとプライバシーが向上し、信頼性のあるメディア再生が可能になります。暗号化されたメディアへのアクセスを許可することで、YouTubeビデオのコンテンツを安全に再生できます。 HTTPS接続が確立されている場合にのみ機能します。
gyroscope（ジャイロスコープへのアクセス）:
- ジャイロスコープへのアクセスを許可すると、デバイスの傾きや回転に応じてビデオを調整できます。例えば、デバイスを傾けるとビデオがパノラマビューモードに切り替わったり、回転したりするような機能に使用されます。
picture-in-picture（ピクチャー・イン・ピクチャー表示）:
- ピクチャー・イン・ピクチャー表示を許可すると、ビデオプレーヤーを小さく表示し、ユーザーがビデオを視聴しながら他のコンテンツを閲覧できるようになります。コンテンツの同時視聴が可能になるため、ユーザーエクスペリエンスの向上に役立ちます。
web-share（Webシェア機能）:
- Webシェア機能を有効にすると、ユーザーがビデオをソーシャルメディアプラットフォームや他のウェブサービスなどで共有できるようになります。これにより、ビデオの拡散と共有が容易になります。