IframeタグのYouTube プレーヤー埋め込み

CGI'sトップページ > Youtube API メモ > IframeタグのYouTube プレーヤー埋め込み
推奨方式: IFrame の場合はクライアントの機能と使用できる YouTube ファイル形式に基づいて適切なプレーヤーが選択されるため、YouTube プレーヤーの埋め込みには埋め込み IFrame がおすすめです。

ということで、IFrameでのプレーヤー埋め込みを試してみる。

自分でIFrameタグのSRCに動画URLを指定する。

IFrameタグのSRCにhttp://www.youtube.com/embed/VIDEO_IDといったURLを指定する。


サンプルコード


サンプル


以下のようなパラメータが設定可能。

実際に選択のラジオボタン、チェックボックスをチェックすると上記サンプルへ反映します。

パラメータ 意味 値
autohide 動画のコントロールを自動的に非表示にするかどうか
0 常時表示
1 再生開始数秒後に非表示
2 進行バーのみ非表示（デフォルト）
実際に選択 0 1 2

パラメータ 意味 値
autoplay 自動再生するかどうか
0 自動再生しない（デフォルト）
1 自動再生する
実際に選択 0 1

パラメータ 意味 値
cc_load_policy 字幕を強制的に表示
1 表示する
実際に選択 1

パラメータ 意味 値
color 進行バーの色
0 表示しない
1 表示する（デフォルト）
実際に選択 red white

パラメータ 意味 値
controls 動画のプレーヤー コントロールを表示するかどうかとプレーヤー コントロールの読込時期
0 表示しない、即時読込
1 表示する、即時読込（デフォルト）
2 表示する、動画再生後読込
実際に選択 0 1 2

パラメータ 意味 値
disablekb キーボード操作を禁止する
0 禁止しない（デフォルト）
1 禁止する
実際に選択 0 1

パラメータ 意味 値
enablejsapi JavaScript API を有効にする
0 無効（デフォルト）
1 有効
実際に選択 0 1

パラメータ 意味 値
end 指定秒数で動画の再生を停止
正の整数 指定秒数で動画の再生を停止
実際に選択 3秒 5秒 10秒

パラメータ 意味 値
start 指定秒数後から動画を再生
正の整数 指定秒数後から動画を再生
実際に選択 3秒 5秒 10秒

パラメータ 意味 値
fs 全画面表示ボタンを表示する
0 表示しない
1 表示する（デフォルト）
実際に選択 0 1

パラメータ 意味 値
hl インターフェースの言語設定
jp,enなど インターフェースの言語設定
ISO 639-2 Codeとなっているが設定できない。ISO 639-1 Codeだと設定可能。
実際に選択 日本語 英語 中国語

パラメータ 意味 値
iv_load_policy 動画アノテーションの表示
1 表示する（デフォルト）
3 表示しない
実際に選択 1 3

パラメータ 意味 値
loop 繰り返し再生
0 繰り返さない（デフォルト）
1 繰り返す
playlistパラメータも同時に設定しなくてはならない。単一動画の場合、当該VIDEO_IDを指定。
実際に選択 0 1

パラメータ 意味 値
modestbranding ロゴ非表示
1 表示しない
実際に選択 1

パラメータ 意味 値
origin セキュリティ強化
ドメイン名 セキュリティ強化
Youtubeの当該パラメータ説明ページではURL形式で記載されている。値はドメイン名というかURLだと思われる。
実際に選択 http://www.cgis.biz/

パラメータ 意味 値
playlist 複数動画の連続再生
動画 ID をカンマで区切ったリスト 複数動画の連続再生
実際に選択 Sq5QW3YqipM,rgq1Ly0FvK4

パラメータ 意味 値
playsinline インライン表示か全画面表示（iOSのみ）
0 全画面表示（デフォルト）
1 インライン表示
実際に選択 0 1

パラメータ 意味 値
rel 再生終了時に関連動画を表示するかどうか
0 表示しない
1 表示する（デフォルト）
実際に選択 0 1

パラメータ 意味 値
showinfo 再生前にタイトルやユーザー情報を表示するかどうか
0 表示しない
1 表示する（デフォルト）
実際に選択 0 1

パラメータ 意味 値
theme プレーヤーのテーマ
dark 暗いテーマ（デフォルト）
light 明るいテーマ
実際に選択 dark light



Youtube API メモ Indexへ戻る