トップ > Webデザイン > サイトに音声オン・自動再生でYouTubeを置く方法: IFrame Player API - Page.2
最終更新日

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

Webデザイン ウェブ開発 YouTube埋め込み 自動再生 オーディオ制御


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

YouTube


カスタマイズオプション（パラメータ）


つづいては、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ページ上での動画再生をユーザーエクスペリエンスに合わせて調整できます。

埋め込みコード例


rubirubi.hateblo.jp


1

2

3

4