Youtube動画を埋め込む方法！知っておきたいカスタマイズ16選

Webサイト制作で、メインビジュアルやプロモーションビデオなどの掲載に、YouTubeを使うことがあります。

その時、「動画再生開始時間を指定したい」「ループして動画を再生したい」など単純に動画を流すだけではなく、カスタマイズを行って、より近いイメージに変更できればと思うケースがありますよね。そんなカスタマイズが行える「IFrame Player API」の使い方について、ご紹介します。

本記事は、このAPIを使って何ができるのかを重点に置いた、Webサイト制作者全般に向けた記事です。

APIは、iframeタグを使ってYouTube動画プレーヤーを設置、JavaScriptでプレーヤーを制御できるのです。APIを使うことで、主に下記の調整が可能になります。

• 再生コンテンツ指定
• 字幕設定
• 動画プレーヤーのコントロール設定
• キーボード操作を有効・無効
• 音量調整
• 再生開始・停止時間の指定

また動画プレーヤーは、少なくとも 幅480ピクセル、高さ270ピクセルのアスペクト比16:9の動画プレーヤーが推奨されています。

動画プレーヤーの設置とカスタマイズ方法

設置方法

動画プレーヤーの設置は非常にシンプルです。iframeタグを設置して、URLを指定するだけで実装可能です。

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?start=30&controls=0" frameborder="0"></iframe>

カスタマイズで使うパラメータ

「？」以降の記述は、パラメータと呼ばれています。URLの「controls =0」は、プレーヤーのコントロールを非表示にして、「start=30」は、再生開始時間を指定した記述になります。「〇〇〇=〇」のように指定することで、指定した機能を適用できます。また「&」で区切ることで、複数の機能を適用できます。

再生する動画を指定する方法

特定の動画や再生リストなど、どんな動画を再生するか指定することができます。iframeに指定するパラメータを含んだURLを変更することで、特定の動画や再生リストなどのコンテンツ指定ができます。

特定の動画を再生したい

iframeタグに指定するURL
https://www.youtube.com/embed/[YouTube動画ID]

YouTube動画IDは、動画ページのアドレスの「v=」以降の部分がIDになります。下記URL例のIDは「M7lc1UVf-VE」。
（例）https://www.youtube.com/watch?v=M7lc1UVf-VE

再生リストを再生したい

iframeタグに指定するURL
https://www.youtube.com/embed?listType=playlist&list=[YouTube 再生リスト ID]

YouTube再生リストIDは、再生リストページのアドレスの「list=」以降の部分がIDになります。
（例）
https://www.youtube.com/playlist?list=PLOU2XLYxmsIJh1bR7bH5XXUCogb88sRP3
IDは「PLOU2XLYxmsIJh1bR7bH5XXUCogb88sRP3」。

ユーザーのアップロード動画を再生したい

iframeタグに指定するURL
https://www.youtube.com/embed?listType=user_uploads&list=[YouTube ユーザー名]

YouTube ユーザー名は、Googleアカウントの名前になります。

特定の検索結果を再生したい

iframeタグに指定するURL
https://www.youtube.com/embed?listType=search&list=[検索キーワード]

検索キーワードは、「YouTube Developers Live」で検索結果を再生する場合、
「list=YouTube+Developers+Live」と入力します。

再生リストの読み込みの一例

src属性のURLを変更することで、再生リストが読み込まれます。

<iframe id="player" type="text/html" width="640" height="360" src=" https://www.youtube.com/embed?listType=playlist&list=[YouTube 再生リスト ID]" frameborder="0"></iframe>

パラメータでできるカスタマイズ方法

再生コンテンツ指定の他にも、色々な機能がありますので、ピックアップしてご紹介します。

字幕を表示する

デフォルトの言語を指定 : cc_lang_pref

動画の視聴者が、日本人がメインの場合、cc_lang_prefでデフォルトを日本語にしておくのが推奨です。jaが日本語で、enが英語になります。その他の言語については、こちら(http://www.loc.gov/standards/iso639-2/php/code_list.php)の ISO 639-1 Codeの2文字を指定することで設定できます。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?cc_lang_pref=ja" frameborder="0"></iframe>

デフォルトの字幕を表示・非表示 : cc_load_policy

映像をメインで表現したい動画は、cc_load_policyで字幕を非表示にできます。1が字幕を表示で、0が非表示になります。デフォルト値はユーザー設定に依存します。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?cc_load_policy =0" frameborder="0"></iframe>

動画プレーヤーのコントロールを設定する

コントロールを表示・非表示 : controls

コントロールとは、動画の上にカーソルを乗せた時、シークバーや再生ボタンを操作できるユーザーインターフェースのことです。ユーザー操作が不必要なメインビジュアルで使う場合は、controlsでコントロールを非表示にします。

1がコントロールを表示で、0が非表示になります。デフォルト値は1です。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?controls=0" frameborder="0"></iframe>

コントロールの全画面表示ボタンを表示・非表示 : fs

コントロールは必要だけど、あくまでWebサイトのパーツとして扱うため、全画面表示が必要のない場合は、非表示にします。
1が全画面表示ボタンを表示で、0が非表示になります。デフォルト値は1。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?fs=0" frameborder="0"></iframe>

キーボード操作を設定する

キーボード操作を有効・無効 : disablekb

特殊な案件で、キーボード操作を行われたくない場合は、disablekbでキーボード操作を無効にできます。
1がキーボード操作を無効で、0が有効になります。デフォルト値は0。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?disablekb=1" frameborder="0"></iframe>

音量を設定する

ミュートの指定 : mute

自動再生は、ミュートにしていないと動かないケースがあるため、自動再生を行う際は、ミュート有効が推奨です。ミュートの有効・無効はmuteで指定できます。
1がミュートを有効で、0が無効になります。デフォルト値は0。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?mute=1" frameborder="0"></iframe>

再生設定

任意の動画を複数再生: playlist

playlistでYouTube動画IDを任意で複数指定して、動画を複数再生できます。複数指定する場合、カンマ区切りでIDを指定します。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed?playlist=M7lc1UVf-VE,PkZNo7MFNFg" frameborder="0"></iframe>

自動再生の指定 : autoplay

ページへアクセスしたとき、動画を再生しておきたい場合は、autoplayで自動再生を有効にします。
1が自動再生を有効で、0が無効になります。デフォルト値は0。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1" frameborder="0"></iframe>

再生開始時間を指定する : start

動画の途中で、初めに見せたい内容がある場合、startで再生開始時間を指定します。指定した秒数から再生されます。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?start=30" frameborder="0"></iframe>

再生停止時間を指定する : end

動画の一部をユーザーに見てもらう場合に、endで再生停止時間を指定します。指定した秒数で停止します。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?end=45" frameborder="0"></iframe>

動画再生のループを有効・無効 : loop

メインビジュアルなどで、動画を繰り返し再生させておきたい場合は、ループを有効にします。
以前は、loopのみで動作しましたが、2021年1月現在、loopを動作させるには、playlistと一緒に指定する必要があります。1がループを有効で、0が無効になります。再生リストの場合、全体の再生の後、最初の動画を再生します。デフォルト値は0です。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?loop=1&playlist=M7lc1UVf-VE" frameborder="0"></iframe>

関連動画の設定

動画終了時の関連動画の指定 : rel

動画終了時に、同チャンネルの動画を告知したい場合は、「0」にします。
1が他チャンネルを含めた関連動画で、0が同チャンネルの関連動画になります。デフォルト値は1です。
(例)

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?rel=0" frameborder="0"></iframe>

※以前は、関連動画を非表示にすることができましたが、YouTubeの仕様変更により、関連動画を非表示することができなくなりました。

再生開始・停止時間を指定した特定の動画再生の一例

パラメータを記述することで、指定した機能が適用されます。
startで、再生開始時間の指定を行い、
endで、再生停止時間の指定を行っています。

<iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?start=30&end=60" frameborder="0"></iframe>

自動再生しない場合の解決方法

自動再生を有効にしていても、動かないケースがあります。
それは多くのウェブブラウザが、ポリシーによって「音声ありで自動再生できない」ためです。
解決策は、デフォルトの音量設定をミュートにすることです。
自動再生を行うときのパラメータは、「autoplay=1&mute=1」とセットで設置するようにしましょう。

JavaScriptを使ったプレイヤーの制御

設置したプレイヤーを制御する場合は、JavaScriptを使います。
実装方法は、JavaScriptの知識が必要になり、公式リファレンス(https://developers.google.com/youtube/iframe_api_reference?hl=ja)を読み解く必要があるため割愛させていただき、「JavaScriptで実装する利点」「プレーヤーを制御してできること」に焦点を絞って、ご紹介させていただきます。

JavaScriptで実装する利点

設置したプレイヤーの操作が行えます。
例えば、自前のボタンを押すことで、前後のプレイリストを再生する、音量を上下するといったことが可能になります。
またプレーヤーの読み込みが完了したときや、再生や停止などのタイミングを検知できるため、何らかの処理をYouTubeと連携して組み込むこともできます。

プレーヤーを制御してできること

ユーザーアクションが起こったときや特定のタイミングで、主に下記の操作が可能になります。

• 動画の読み込みと再生
• 再生開始・停止時間の指定
• 画質設定
• 動画の再生・一時停止・停止
• 再生リスト内の「次」「前」の動画を再生
• 再生リスト内の動画を指定して再生
• プレーヤーの音量をミュートに変更・解除
• 音量を0～100で設定
• 再生速度の倍率を設定
• ループの有効・無効
• 再生リストをシャッフル再生
• プレーヤーのサイズ設定
• 再生、停止中などの再生ステータスを取得
• 再生画質の設定を取得
• 再生時間やURLなどの動画情報を取得
• プレーヤーの読み込み完了や再生、停止などの状態を検知

まとめ

APIを使うときは、はじめにJavaScriptの記述が必要なのか、ご確認ください。
ユーザーアクションや特定のタイミングでプレーヤーの制御が必要ない場合は、iframeタグを使ってYouTube動画プレーヤーの設置のみで実装ができます。
逆に、プレーヤーの制御も必要な場合は、JavaScriptでプレーヤーの制御が必要になります。
要件によって、どこまで必要なのか取捨選択していただき、組み込んでいただければと思います。

APIを使って何ができるのかに焦点を置いてご紹介させていただきましたが、さらに詳細に調べる方は、公式リファレンス(https://developers.google.com/youtube/iframe_api_reference?hl=ja)をご参照ください。YouTubeを使う機会も多くなっていますので、よりよいWebサイト構築のご助力になればと思います。

ドローンのふかん撮影とスチール撮影の関係性。撮る「高さ」を考える