2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【2022年】YouTube埋め込みの全パラメータを一覧にしてみた

Posted at

今回はYouTube動画の埋め込み時に使用出来るパラメータを調査しました。
各所パラメータの紹介がされていますが、中にはサポート停止で使用出来ないものもあり、なかなか使いにくいなと感じています。
そこで、2022年現在におけるYouTube動画埋め込みにて使用可能なパラメータを一挙にまとめていきたいと思います。

YouTube動画の埋め込み方法

(1) 動画画面の「共有」をクリックする
(2) 「埋め込む」をクリックする
(3) 下記のようなiframeタグに囲まれたコードを埋め込みたい箇所にコピペする
<iframe id="ytplayer" type="text/html" width="640" height="360"src="https://www.youtube.com/embed/○○○○?autoplay=1&frameborder="0"></iframe>

YouTube動画のパラメータとは?

端的にいえば、埋め込み動画をカスタマイズするための文字列のことです。

例えば、上記のコードで言えば、
<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/○○○○?autoplay=1&frameborder="0"></iframe>

?autoplay=1&frameborder="0" を指しています。
ちなみに"autoplay"は動画の自動再生を制御、"frameborder"は動画の周りに枠線追加/削除を指定できます。

使用可能な全てのパラメータ一覧

現在使用可能なパラメータをすべて書きました。
パラメータの内容や指定方法も書いていますので、そのままコピペで使用可能です。

autoplay:自動再生する

?autoplay=1&mute=1

autoplay=1を指定することでDOMの読み込みが完了すると自動再生させることが出来ます。
しかし、autoplay=1とセットでmute=1を追加しないと自動再生をさせることが出来ません。
(おそらく音声が急に出てきてしまうための防止策でデフォルト設定されている)

デフォルト値の0は自動再生なしなので、autoplay=0にすると自動再生はしません。

mute:ミュート(音声オフ)にする

?mute=1

autoplayでも登場しましたが、再生時に音声をミュートにしてくれます。
mute=1でミュートオン、mute=0でミュートオフです。
こちらは単体で使用出来ます。

cc_load_policy:字幕を最初から表示する

?cc_lang_pref=1

最初から字幕を表示させることが出来ます。
表示される言語は動画で使われている言語が自動的に追加されるので特に指定は必要ありません。
cc_load_policy=0は字幕なしです。

cc_lang_pref:字幕のデフォルト言語を設定する

?cc_lang_pref=ja
?cc_lang_pref=en

再生開始時から表示される字幕の言語を設定できます。
ただ、動画で対応していない言語は設定できません。
パラメータの値は「ISO 639-1 2 文字言語コード」を使用します。

color:再生バーの色を変更する

?color=red
?color=white

再生時間を表示する赤色のバーの色を変更することが出来ます。
ただ、設定できる色はred(赤)かwhite(白)のみです。

そして、whiteを使用すると、modestbrandingが使用できなくなります。
※modestbrandingは後述

controls:埋め込み動画のコントロール表示を指定する

?controls=0

再生時間の表示部分や赤色のバーなどを非表示することが出来ます。
非表示にしたい場合はcontrols=0を指定してください。

disablekb:キーボード操作を無効にする

?disablekb=0

キーボードでの操作を有効/無効に出来ます。
デフォルトはdisablekb=1でキーボード操作が有効になります。

enablejsapi:HTMLにiframeを直書きしてAPIを有効にする

?enablejsapi=1

普段はコピペで埋め込みが出来ますが、自分でiframeを使ってイチから書きたい場合に指定します。
デフォルトのenablejsapi=0はAPIを無効にします。

end:再生開始~特定の場所で再生を止める

?end=指定の秒数

endの値は秒数を指定します。
例えば、2分後に停止させたい場合は120と指定します。

fs:全画面ボタンを非表示にする

?fs=0

全画面ボタンを非表示に設定が出来ます。
表示させたい場合はfs=1であり、デフォルトの設定になっています。

hl:ツールチップの言語を指定する

?hl=ja

hlは埋め込み動画のアイコン上にマウスを移動したときに表示される文字の言語を指定できます。
パラメータの値はISO 639-1 規格の 2 文字言語コードを使用すればOKです。

iv_load_policy:動画上のクリック可能なテキストを表示させる

?iv_load_policy=3

動画上に表示されるクリック可能なテキスト(=アノテーション)を表示/非表示させることが出来ます。
デフォルトはiv_load_policy=1で表示させる、非表示の場合はiv_load_policy=3になります。

list、listType:再生リストや公開動画リスト、検索結果リストを表示させる

?listType=playlist&list=リストID

listTypeは再生リストのID、動画投稿したユーザー名、検索キーワードを指定します。
主に3つの指定が出来ます。

  • playlist:再生リスト
  • user_uploads:公開されている動画リスト
  • search:動画検索の結果リスト

listは再生リストやユーザーが公開している動画、検索結果のリストを指定します。
なので、再生リストを埋め込みたいときはlistTypeでplaylist、listに再生リストのIDを指定すればOKです。

loop:再生をループさせる

?loop=1&playlist=動画のID

loopは埋め込み動画の再生をループさせる/させないの設定が出来ます。
loop=1でループあり、loop=0でループなし(デフォルト)です。

ただ、loopは単体で使用出来なくなり、使用する場合はplaylistで動画IDを指定しなければいけません。

modestbranding:埋め込み動画内のYouTubeロゴを非表示にする

?modestbranding=1

modestbrandingは埋め込み動画内にあるYouTubeロゴの表示/非表示を設定できます。
modestbranding=1が非表示、modestbranding=0が表示(デフォルト)です。

なお、color=whiteを使用していると非表示にはできません。

origin:埋め込み動画のセキュリティを高める

?origin=サイトドメイン

originはiframe形式で埋め込んだ動画のセキュリティを高めることが出来ます。
値は埋め込み先のサイトドメインを入れます。

ちなみにiframe形式以外の埋め込み動画では使用できません。
基本は設定しておく方が良いと言われています。

playlist:再生リストを指定する

?playlist=動画ID①,動画ID②

playlistは再生する動画をリストで指定することが出来ます。
指定方法はplaylist=動画ID①,動画ID②,のように再生する動画をカンマ区切りで指定します。

playsinline:インラインで表示させる【iOSのみ】

?playsinline=1

playsinlineはiOS端末でHTML5形式の動画をインライン、もしくは全画面表示に設定することが出来ます。
playsinline=0は全画面表示(デフォルト)、playsinline=1はインラインで再生されます。

start:動画の再生時間を指定する

?start=秒数

startは動画開始時から指定した秒数まで動画を再生するよう制御できます。
start=秒数のように指定した値には秒数を入れます。

widget_referrer:アナリティクスに動画情報を収集させる

?widget_referrer

widget_referrerは動画が埋め込まれているサイトのURLを識別することでYouTubeアナリティクスに再生数などの使用情報を送らせることが出来ます。

originもドメインを指定しますが、YouTubeアナリティクスには情報を送ることが出来ないため、YouTubeアナリティクスを活用したい場合はこちらを指定しましょう。

おまけ)関連動画を非表示にしたい

埋め込み動画再生後に表示される関連動画を非表示にする方法について解説します。
以前はrelを使用することで関連動画の非表示が出来たのですが、relが非対応となり現状関連動画を非表示にする方法は1つあります。

それが以下になります。

?loop=1&playlist=動画のID

つまり、動画をループさせるしか方法は現状無いようです。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?