サイトに音声オン・自動再生でYouTubeを置く方法: IFrame Player API


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



全体(4ページ)の目次を開閉

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

Page.1 Contents


埋め込みの基本手順


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

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


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


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


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


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


  1. Webサイトの管理画面にログインし、動画を表示させたい場所にアクセスします。
  2. 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ページに最適な方法で表示できます。

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

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


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


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

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


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


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

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

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


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



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

  1. accelerometer(加速度計へのアクセス):

    • この権限を有効にすると、ビデオプレーヤーがデバイスの加速度計にアクセスし、デバイスの物理的な傾きを検出できます。 これは、一部のモバイルデバイスでのビデオ再生中にビデオプレーヤーの方向を調整するのに役立ちます。
  2. autoplay(自動再生):

    • このオプションを設定すると、YouTubeビデオが自動的に再生されます。 ただし、一部のブラウザでは自動再生がブロックされることがあります。 ユーザーエクスペリエンスを向上させるためには、ユーザーの操作に基づいて再生を開始することを検討することが重要です。
  3. clipboard-write(クリップボードへの書き込み):

    • この権限を許可すると、ビデオ再生中にユーザーがクリップボードにテキストやリンクなどのデータを書き込むことができます。 これは、シェアボタンなどの機能で共有リンクをコピーする際に使用されます。
  4. encrypted-media(暗号化されたメディアへのアクセス):

    • この権限を有効にすると、ビデオプレーヤーがHTTPS接続を介して暗号化されたメディアコンテンツにアクセスできます。 これにより、セキュリティとプライバシーが向上し、信頼性のあるメディア再生が可能になります。 暗号化されたメディアへのアクセスを許可することで、YouTubeビデオのコンテンツを安全に再生できます。 HTTPS接続が確立されている場合にのみ機能します。
  5. gyroscope(ジャイロスコープへのアクセス):

    • ジャイロスコープへのアクセスを許可すると、デバイスの傾きや回転に応じてビデオを調整できます。 例えば、デバイスを傾けるとビデオがパノラマビューモードに切り替わったり、回転したりするような機能に使用されます。
  6. picture-in-picture(ピクチャー・イン・ピクチャー表示):

    • ピクチャー・イン・ピクチャー表示を許可すると、ビデオプレーヤーを小さく表示し、ユーザーがビデオを視聴しながら他のコンテンツを閲覧できるようになります。 コンテンツの同時視聴が可能になるため、ユーザーエクスペリエンスの向上に役立ちます。
  7. web-share(Webシェア機能):

    • Webシェア機能を有効にすると、ユーザーがビデオをソーシャルメディアプラットフォームや他のウェブサービスなどで共有できるようになります。 これにより、ビデオの拡散と共有が容易になります。

これらの許可機能は、YouTubeビデオをより対話的で魅力的なものにするために使用できます。

ビデオプレーヤーの動作やユーザーエクスペリエンスをカスタマイズし、ビデオをより多くのコンテキストで活用できるようにするのに役立ちます。

ただし、許可権限を適切に管理し、ユーザーセキュリティとプライバシーを守ることが非常に重要です。

1

2

3

4


## カスタマイズオプション(パラメータ)
つづいては、URLの末尾に追記することでプレイヤーの動作を制御できる、パラメータについて詳しく説明します。 実装方法としては、動画アドレスの末尾に`?`をつけ、そのあとに各パラメータ構文を記載します。 複数のパラメータを繋げたいときは`&`を間に入れます。 例 : https://www.youtube.com/embed/KahDf8YaKj8`?`rel=0`&`enablejsapi=1`&`end=10`&`fs=0`&`modestbranding=1"
※2023年9月時点で動作確認ができたものを掲載しています。
### `autoplay` 自動再生 `autoplay=0` : 自動再生OFF(デフォルト) `autoplay=1` : 自動再生ON 自動再生オプションを有効にすると、ユーザーがWebページを訪れた瞬間に動画が自動的に再生されます。 ただし、注意が必要です。自動再生はユーザーエクスペリエンスに影響を与えることがあるため、慎重に使用する必要があります。
>
> **自動再生とスクリプト再生** > Chrome や Safari などのモバイル ブラウザでは、HTML5 `