Youtube の埋め込み動画を自動再生やループ再生やプレイリストを再生する方法

Youtube

サイトに Youtube の埋め込みプレイヤーを貼り付ける方法は二つあります。
一般的なのは Youtube の再生ページから貼り付けコードを取得したときに使われる、iframe の HTML5 のコードです。
他に Java Script Player API という様々なパラメータを使える貼り付け方があるのですが、こちらはコードが長く一般的ではありません。
大半のパラメータは iframe HTML5 のプレイヤーで使用できるので、こちらのタイプでの設定方法を紹介します。

Youtube の再生ページから、共有>埋め込む>コードを取得、で取得したコードは次のようになります。

<iframe width="" height="高さ" src="https://www.youtube-nocookie.com/embed/動画 ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

このうち絶対に必要な部分だけを記述するとわかりやすくなります。

<iframe width="" height="高さ" src="https://www.youtube-nocookie.com/embed/動画 ID"></iframe>

各種パラメータは動画 ID の後ろに加えます。
例えば自動再生とループ再生を加えた場合は以下のようなコードになります。

<iframe width="" height="高さ" src="https://www.youtube-nocookie.com/embed/動画 ID?autoplay=1&loop=1"></iframe>

最初のパラメータの前には「?」を付け、二つ目以降は「&」で繋げていくだけです。
パラメータには以下の表のような物がありますが、Youtube の仕様変更により定期的に変更されます。

パラメータ

パラメータ 説明
autoplay 自動再生の指定。
無効=0 有効=1 デフォルト=0
loop ループ(リピート)再生を指定。
0=無効 1=ループ有効 デフォルト=0
playlist と組み合わせて使うパラメータですが、単一の動画でも使用可能。
再生リストに1を設定した場合、再生リストの最後の動画を際した後、最初の動画が再生される。
単一の動画をループさせる場合は loop パラメータの値を 1 に設定し、
既に Player API URL と playlist パラメータの値に同じ動画 ID 設定する。
例:http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID
start 秒単位で指定した時間から再生する。
35秒の地点から再生する場合は、start=35
キーフレームからの再生となるため、最大で 2 秒程度ずれる場合がある。
end 秒単位で指定した時間で再生を停止する。
35秒の地点で停止する場合は、end=35
rel 動画が終了したときの関連動画の表示を指定。
0=非表示 1=表示 デフォルト=1
2018年9月に仕様変更があり、0でも完全非表示にはならず動画と同チャンネル内の関連動画が表示されるようになりました。
チャンネル内に他の動画があっても関連性があると判断された動画が無ければ何も表示されません。
動画が一つしかないチャンネルであれば何も表示されません。
iv_load_policy 動画アノテーションの表示を指定。
1=表示 3=非表示 デフォルト=1
modestbranding YouTube のロゴの表示を指定。
1=非表示
未設定=表示
fs 全画面表示ボタンの表示を指定。
0=非表示 1=表示 デフォルト=1
showinfo 動画の再生前にタイトルやユーザー情報を非表示。
0=非表示 1=表示 デフォルト=1
cc_load_policy 字幕の強制表示。
1=強制表示 デフォルト=ユーザーの Youtube 設定次第。
controls プレーヤーのコントロールの表示設定。
0=非表示 1=動画の再生後に表示 2=動画の再生後に表示 デフォルト=1
IFrame で埋め込む場合は 1 と 2 に基本的な違いは無く、
0 に設定しないのであれば何も設定せずにデフォルトを使用すべき。
disablekb キーボードでのプレーヤー操作を無効にする。
0=操作可能 1=操作無効 デフォルト=0

Space キー: 再生 / 一時停止
← キー: 現在の動画を 10% 戻す
→ キー: 現在の動画を 10% 進める
↑ キー: 音量を上げる
↓ キー: 音量を下げる
hl プレーヤーのインターフェースの言語を指定。
ISO 639-1 2 文字言語コードで指定。
設定例:日本語「hl=ja」、英語「hl=en」
color プレーヤーのシークバーの再生済み領域の色を変更。
白=white 赤=red(未設定と同じ)デフォルト=red
white に設定すると modestbranding パラメータが無効になる。
playsinline iOS 上の HTML5 プレーヤーで動画をインラインまたは全画面表示のどちらで再生するかを指定する。
0=全画面表示 1=インライン デフォルト=0(今後変更の可能性あり)
1に指定すると UIWebViews(allowsInlineMediaPlayback プロパティを TRUE に設定して作成したもの)がインライン再生される。
playlist 複数の動画を ID で指定して連続再生する。
例:https://www.youtube.com/embed/動画ID1?playlist=動画ID2,動画ID3,動画ID4
カンマで区切って ID を入力するだけ。
listType
list
listType と list は合わせて使われます。
listType で以下の3タイプのリストのどれかを指定します。

playlist(再生リスト)
user_uploads(公開動画リスト)
search(動画検索結果リスト)


list には listType で選択したリストに合わせた ID を入力します。

user_uploads の場合は、アップロード者の YouTube ユーザー名(半角英数字)を指定します。
例:https://www.youtube.com/embed?listType=user_uploads&list=ユーザー名

search の場合は、検索クエリ(英数のみで日本語は不可)を指定します。
ワードを複数入力する場合はスペースの代わりに「+」を入力します。
Game と 2019 の二つで検索する場合は、
例:https://www.youtube.com/embed?listType=search&list=Game+2019

playlist の場合は、再生リストの PL から始まる ID を指定します。
例:http://www.youtube.com/embed?listType=playlist&list=PL プレイリスト ID

コメント