サイトに音声オン・自動再生でYouTubeを置く方法: IFrame Player API - Page.2
WebサイトにYouTube動画を埋め込むことは、訪問者に対して情報を視覚的に提供し、コンテンツの魅力を高めるために非常に重要です。
この記事では、YouTube動画のWebサイトへの埋め込み方法について詳しく説明し、音声オンで自動再生させる手順までご紹介します。
カスタマイズオプション(パラメータ)
つづいては、URLの末尾に追記することでプレイヤーの動作を制御できる、パラメータについて詳しく説明します。
実装方法としては、動画アドレスの末尾に?
をつけ、そのあとに各パラメータ構文を記載します。
複数のパラメータを繋げたいときは&
を間に入れます。
例 :
https://www.youtube.com/embed/KahDf8YaKj8?
rel=0&
enablejsapi=1&
end=10&
fs=0&
modestbranding=1"
※2023年9月時点で動作確認ができたものを掲載しています。
パラメータオプション一覧
パラメータ | 設定値 | 説明 |
---|---|---|
preload= | none /metadata" |
事前読み込みしない/メタデータ(再生時間など)だけ読み込む |
playsinline= | 1 /0 |
インライン表示/全画面表示(スマホ) |
rel= | 1 /0 |
関連動画表示/非表示 |
modestbranding= | 0 /1 |
Youtubeロゴ表示/非表示 ※1で非表示 |
autoplay= | 1 /0 |
オートプレイON/OFF |
mute= | 1 /0 |
ミュートON/OFF |
start= | 数値 | 開始位置指定(秒単位) |
end= | 数値 | 終了位置指定(秒単位) |
loop= | 1 /0 |
ループON/OFF |
playlist= | 動画IDを, で繋ぐ |
リスト再生 例:https://www.youtube.com/embed/?playlist=vCHNFVMFCZo,88sBDXiH4_M,S2P8PilNkCE |
listType=playlist&list= | リストID | プレイリスト再生 例:https://www.youtube.com/playlist?list=PLa874BnsXj3zUClIJJsDsM1WxGJOmZrp7 |
color= | white /red |
シークバー白/赤 |
cc_load_policy= | 1 |
字幕強制表示 |
enablejsapi= | 1 |
IFrame Player APIを呼び出してプレーヤーを制御できる |
hl= | ja /en /zh /es |
ホストランゲージ 日本語/英語/中国語/スペイン語 |
廃止
パラメータ | 設定値 | 説明 |
---|---|---|
theme= | light /dark |
テーマカラー |
showinfo= | 1 /0 |
タイトル表示ON/OFF |
vq= | 1 /0 |
画質の事前設定(Video Quality) |
iv_load_policy= | 1 /3 |
アノテーション(注釈)表示ON/OFF |
詳細解説
autoplay
自動再生
autoplay=0
: 自動再生OFF(デフォルト)
autoplay=1
: 自動再生ON
自動再生オプションを有効にすると、ユーザーがWebページを訪れた瞬間に動画が自動的に再生されます。
ただし、注意が必要です。自動再生はユーザーエクスペリエンスに影響を与えることがあるため、慎重に使用する必要があります。
自動再生とスクリプト再生Chrome や Safari などのモバイル ブラウザでは、HTML5
<video>
要素を再生するには、ユーザーの操作(プレーヤーをタップするなど)による起動が必要です。 以下は、Apple のドキュメントの抜粋です。「警告: ユーザーが費用負担する携帯電話ネットワーク経由で要求していないダウンロードを防止するために、iOS の Safari では組み込みメディアを自動再生できません。 必ずユーザーが自分で再生します。」
この制限があるため、autoplay、playVideo()、loadVideoById() などの関数およびパラメータはすべてのモバイル環境では動作しません。
iframe 組み込みの YouTube Player API リファレンス | YouTube IFrame Player API | Google for Developers
また、のちほどご案内するやり方でないと(厳密にいえばそちらもなのですが…。少し、裏ワザ的?なやり方です。)動画の自動再生は、ミュートの設定と対でなければなりません。
つまり、通常は消音状態でのみ自動再生が可能となります。
これは、URLの末尾に?autoplay=1&mute=1
を追加することで実現できます。
autoplay=1
だけを指定しても、自動再生されません(^▽^;)。
また、コピーしたコードのプロパティにもautoplay;
は含まれていますが、こちらがあっても同様に自動再生はなぜか?されません…
loop
ループ再生
loop=0
: ループOFF(デフォルト)
loop=1
: ループON
動画が終了した後自動的に再生が繰り返されます。
この機能は特定のビデオ広告やショーケース動画で有用です。
次のリスト再生と組み合わせて利用します。
リスト再生
リスト再生には2つの主要な方法があります:
- playlistで任意の動画をリスト化する: 任意の動画を一つずつリストアップして再生する方法。
- listType & listでプレイリストを再生する: 登録されている「プレイリスト」を読み込んで再生する方法。
リスト再生1 playlist
任意の動画をリスト化する:
playlist
パラメータにカンマ区切りで動画IDを指定することで、記述した順にリスト化し動画を再生します。
最初に指定した動画が再生され、その後playlistに指定した動画が再生されます。
ループと併用すれば、繰り返し再生されます。
<div class="youtube"> <iframe src="https://www.youtube.com/embed?playlist=1v7UZxPgU9c,SiEUpxUVExk,B6-jmfTZDCI&loop=1"></iframe> </div>
単一動画をループさせる場合は、loopの設定に加え'playlist'に同じ動画IDを指定します。
<div class="youtube"> <iframe src="https://www.youtube.com/embed/B6-jmfTZDCI?playlist=B6-jmfTZDCI&loop=1"></iframe> </div>
リスト再生2 listType
& list
プレイリストを再生する:
listType
パラメータで形式を設定し、値に応じてlist
にプレイリストのIDを指定します。
listType=playlist
の場合、list
にはプレイリストのIDを指定します。
IDはYouTubeでプレイリストを開いたときのURLから確認できます。
<div class="youtube"> <iframe src="https://www.youtube.com/embed?listType=playlist&list=PLa874BnsXj3xDd5dMFNo_NkrAgH0ewD5S&loop=1"></iframe> </div>
start
開始位置と終了位置
start=秒数
: 開始位置を指定
end=秒数
: 終了位置を指定
動画の開始位置と終了位置を指定するオプションは、特定の部分から動画を再生したり、一部をカットしたりするのに役立ちます。
たとえば、動画を30秒から途中再生させたい場合は、?start=30
を追加します。
controls
コントロールバー
controls=0
: 非表示
controls=1
: 表示(デフォルト)
コントロールバーは、再生、一時停止、音量調整などの操作を提供しますが、場合によっては非表示にすることが望ましい場合があります。
これにより、ユーザーは再生と一時停止以外の操作ができなくなります。
modestbranding
YouTubeロゴ
modestbranding=0
: 表示(デフォルト)
modestbranding=1
: 非表示
YouTubeロゴがコントロールバーに表示されなくなります(※厳密には、言葉の意味通り”控えめ”になる)。
ただし動画を一時停止したとき、ユーザーがプレーヤーにカーソルを合わせると、動画の右上に小さいYouTube テキストラベルが表示されます。
rel
関連動画
rel=0
: 非表示
rel=1
: 表示(デフォルト)
通常、YouTubeでは動画の再生が終わると関連する動画がレコメンドされます。
関連動画を表示させないことで、他のチャンネルへの離脱を防ぐ効果が期待されます。
動画プレイヤーの動作をカスタマイズするためのパラメータについて説明しました。
これらのパラメータを使用することで、動画の自動再生、ループ再生、特定の再生位置の指定、コントロールバーの表示/非表示、YouTubeロゴの表示/非表示、関連動画の表示/非表示などを制御できます。
これらのパラメータをURLの末尾に追記することで、YouTube動画プレイヤーの動作をカスタマイズできます。
ただし、一部のモバイルブラウザでは制約があるため、注意が必要です。
動画の自動再生を有効にするには、通常はミュート設定と組み合わせる必要があります。
これらのカスタマイズオプションを使用して、Webページ上での動画再生をユーザーエクスペリエンスに合わせて調整できます。