埋め込みコードの基本形
WebページにYouTube動画を埋め込む際、「パラメータ」を記載することによって、任意の場所から再生させたり、表示スタイルを変えることなどができるようになります。
パラメータの解説の前にまず、下の動画を埋め込む場合の基本コードの意味を理解しましょう。
▼基本コード（実際は「＜」と「＞」を半角で記述します）
＜iframe src=”//www.youtube.com/embed/vbF7tOfitys” width=”640″ height=”360″ frameborder=”0″ allowfullscreen＞＜/iframe＞
このコードの意味はそれぞれ以下の通りです。
■ 再生する動画のURL
・src=”//www.youtube.com/embed/7DGAoeMXBWM”
この値に「http:」と付け加えると、YouTubeの動画そのものが表示されます。
http://www.youtube.com/embed/vbF7tOfitys
この動画を表示します、という意味ですね。
■ プレイヤーの表示サイズを指定
・width=”640″・・・横幅（ピクセル）
・height=”360″・・・高さ（ピクセル）
YouTubeから埋め込みコードを取得する場合、デフォルトでは幅560px×高さ315pxと設定されていますが、数値を変えることで任意のサイズで埋め込みができます。ただし、縦横の比率を間違えると動画が歪んで表示されてしまうため、動画によって16:9または4:3を維持しましょう。また、200×200pxが最小サイズとされ、YouTubeは幅480px×高さ270px（16:9の場合）以上とすることを推奨しています。
■ プレイヤーに枠線をつけるか
・frameborder=”0″・・・周囲に枠線をつけない
・frameborder=”1″・・・周囲に枠線をつける
「1」にするとプレイヤーの外周に1pxの枠線が表示されます。
■ 全画面表示を許可するか
・allowfullscreen記述無し・・・全画面表示ができないようにする
・allowfullscreen記述有り・・・全画面表示ができるようにする
全画面表示の制御が可能になります。allowfullscreenをつけない場合、全画面表示ができなくなります。
ここまでが基本の埋め込みコードとなります。この基本のコード内の【再生する動画のURL】の後ろに、これからご紹介するパラメータを付加することによって、任意の表示スタイルや再生方法を指定できるようになります。
それではここから、本題である各種パラメータについて具体的に解説していきます。
動画の再生方法に関するパラメータ6選
まずは、動画再生に関する6つのパラメータをご紹介します。パラメータを活用すれば、特定の位置から再生させたり、関連動画の対象をコントロールできるため、より目的や意向に沿った形で視聴者に動画を見てもらえるようになります。
◆目次
自動的に動画を再生させたい
サイト訪問者に余計なクリックをさせたくない場合、動画を必ず視聴して欲しい場合など、自動的に動画を再生させたいときは、以下のコードを追加すると動画が自動的に再生されます。
ただし、自動再生に合わせて音声が勝手に出てしまうとユーザー体験を損ねる可能性があるため、音声付きの動画の場合は「autlplay=1」だけでは自動再生にはならず、ミュート（無音）再生を指定する「mute=1」も併せて記述する必要があります。
【追加コード】
autoplay=1
mute=1
【追加後の埋め込みコード】（実際は「＜」と「＞」を半角で記述します）
＜iframe src=”//www.youtube.com/embed/vbF7tOfitys?autoplay=1?mute=1” width=”640″ height=”360″ frameborder=”0″ allowfullscreen＞＜/iframe＞
繰り返し再生させたい
動画を繰り返し再生させたい、動画終了後の関連動画を表示させたくない場合などは、以下のコードを追加してください。
【追加コード】
loop=1
【追加後の埋め込みコード】（実際は「＜」と「＞」を半角で記述します）
＜iframe src=”//www.youtube.com/embed/vbF7tOfitys?loop=1” width=”640″ height=”360″ frameborder=”0″ allowfullscreen＞＜/iframe＞
指定の位置から動画を再生させたい
動画のあたまからではなく、特定の場面から再生させたい場合は、「start=再生開始位置（秒数）」のパラメータを付加すれば動画の開始時間を指定することができます。
【追加コード】
start=再生開始位置（秒数）
【追加後の埋め込みコード】（実際は「＜」と「＞」を半角で記述します）
＜iframe src=”//www.youtube.com/embed/vbF7tOfitys?start=10” width=”640″ height=”360″ frameborder=”0″ allowfullscreen＞＜/iframe＞
【表示サンプル】
なお、下図のように、YouTubeから埋め込みコードを取得する際にスタート地点を指定することもできます。
指定の位置で動画を停止させたい
指定位置からの再生と同じ様に、指定位置で動画の再生を止めることもできます。設定方法は「指定位置からの再生」と同様、「end=再生停止位置（秒数）」のパラメータを付加します。「start」と「end」の両方を指定すれば、動画の特定の区間だけ再生させることも可能です。
なお、動画が停止した時点ですぐに関連動画が表示されます。
【追加コード】
end=再生停止位置（秒数）
【追加後の埋め込みコード】（実際は「＜」と「＞」を半角で記述します）
＜iframe src=”//www.youtube.com/embed/vbF7tOfitys?end=60” width=”640″ height=”360″ frameborder=”0″ allowfullscreen＞＜/iframe＞
【表示サンプル】
Tips：複数のコードを同時に設定したい場合
2個以上のパラメータを同時に設定したい場合は「＆（半角）」で繋ぎます。順番は任意で構いません。例えば、動画の特定区間のみを自動再生かつ繰り返し再生させたい場合は以下のように書きます。
＜iframe src=”//www.youtube.com/embed/vbF7tOfitys?start=10&end=60&autoplay=1&mute=1&loop=1” width=”640″ height=”360″ frameborder=”0″ allowfullscreen＞＜/iframe＞
関連動画を同一チャンネル内の動画に限定したい
YouTube動画を埋め込むと、動画を一時停止した時や再生が終わった時点で関連動画が必ず表示される仕様になっています。デフォルトでは、YouTubeが選んだ不特定多数の関連動画が表示されますが、下記のようにパラメータで設定することで、その動画と同じYouTubeチャンネル内の動画に限定して関連動画を表示させることができます。
他のYouTubeチャンネルへの離脱を防ぐためには、このパラメータを設定することをオススメします。
【追加コード】
rel=0
【追加後の埋め込みコード】（実際は「＜」と「＞」を半角で記述します）
＜iframe src=”//www.youtube.com/embed/vbF7tOfitys?rel=0” width=”640″ height=”360″ frameborder=”0″ allowfullscreen＞＜/iframe＞
【表示サンプル】
複数の動画を再生させたい
関連動画から他のYouTubeチャンネルへの離脱を防ぐもう一つの方法として、動画再生リストの指定があります。これは複数の任意の動画を選び、動画IDをコード内に羅列することで、そのプレイヤー内で続けて再生される動画を指定できるものです。YouTubeチャンネル内でわざわざ再生リストを作成する必要がなく、繰り返し再生（loop）も設定すれば任意の動画のみを再生させることもできます。
【追加コード】
playlist=（動画ID）,（動画ID）,（動画ID）・・・
【追加後の埋め込みコード】（実際は「＜」と「＞」を半角で記述します）
＜iframe src=”//www.youtube.com/embed/vbF7tOfitys?playlist=XYsLiyMA37o,Nnrb0uqPU4o” width=”640″ height=”360″ frameborder=”0″ allowfullscreen＞＜/iframe＞
【表示サンプル】
動画の表示に関するパラメータ4選
続いて、動画プレイヤーの表示に関する4つのパタメータをご紹介します。
字幕を表示させたい
最近はスマートフォンでの無音再生を想定して、はじめから動画内に字幕を入れるケースが増えていますが、YouTubeの字幕機能を活用することもできます。字幕を表示させたい場合は、以下のパラメーターを追加すると、視聴者が字幕機能をオフにしていても字幕が表示されるようになります。
【追加コード】
・cc_load_policy=0・・・字幕OFF
・cc_load_policy=1・・・字幕ON
【追加後の埋め込みコード】（実際は「＜」と「＞」を半角で記述します）
＜iframe src=”//www.youtube.com/embed/vbF7tOfitys?cc_load_policy=1” width=”640″ height=”360″ frameborder=”0″ allowfullscreen＞＜/iframe＞
YouTubeのロゴを表示したくない
YouTubeプレイヤーの右下にはYouTubeのロゴが表示されています。これはYouTube動画であることを示すだけでなく、クリックをするとYouTubeの動画ページへリンクする仕様となっています。
このロゴを非表示にすることで、ページ訪問者の離脱の割合を減らせる可能性があります。
| 【Before】 ロゴが表示され、クリックするとYouTubeへ遷移してしまう。 |
【After】 ロゴが非表示になり、YouTubeの動画というイメージが薄れる。 |
 |
 |
| 訪問者の離脱を減らす為と書きましたが、逆にYouTube（チャンネルなど）への流入を考える場合は表示をさせておくべきでしょう。特に指定をしなければ、ロゴは表示された状態で埋め込まれます。 | |
【追加コード】
・modestbranding=0・・・ロゴ表示
・modestbranding=1・・・ロゴ非表示
【追加後の埋め込みコード】（実際は「＜」と「＞」を半角で記述します）
＜iframe src=”//www.youtube.com/embed/vbF7tOfitys?modestbranding=1” width=”640″ height=”360″ frameborder=”0″ allowfullscreen＞＜/iframe＞
【表示サンプル】
コントロールバーを表示したくない
通常、動画が再生されてしばらくするとコントロールバーは隠れ、動画プレイヤー上にマウスを移動させると再び表示されますが、パラメータによってコントロールバーを完全に非表示にすることも可能です。一時停止/再生は動画をクリックすることで操作します。
ユーザーの利便性を考えれば、コントロールバーを非表示にするのはあまり得策とは言えませんが、動画が埋め込まれるページのデザインや、その利用のされ方によってはコントロールバーがない方がユーザビリティが高まるシーンもあります。
なお、下の【表示サンプル】のように、コントロール非表示にすると、右下のYouTubeのロゴは大きくなります。
【追加コード】
・controls=0・・・コントロールバー非表示
・controls=1・・・コントロールバー表示
【追加後の埋め込みコード】（実際は「＜」と「＞」を半角で記述します）
＜iframe src=”//www.youtube.com/embed/vbF7tOfitys?controls=0” width=”640″ height=”360″ frameborder=”0″ allowfullscreen＞＜/iframe＞
【表示サンプル】
なお、YouTubeから埋め込みコードを取得する際に、チェックボックスひとつでコントロールバーの表示有無を選ぶこともできます。
シークバー（プログレスバー）の色を変えたい
動画の再生場所を示すシークバー（プログレスバー）は通常、赤色で表示されますが、存在感を控えめにするために白色に変更することができます。
【追加コード】
color=white
【追加後の埋め込みコード】（実際は「＜」と「＞」を半角で記述します）
＜iframe src=”//www.youtube.com/embed/vbF7tOfitys&color=white” width=”640″ height=”360″ frameborder=”0″ allowfullscreen＞＜/iframe＞
【表示サンプル】
より適切な形で動画を視聴してもらえるように
YouTubeという外部プラットフォームを利用している以上、表示スタイルや機能の自由度はそれほど高くありませんが、多くのユーザーとの接点を持つためにはYouTubeの利用は欠かせません。
埋め込み時にコントロールできる範囲を正しく理解した上で、ページ訪問者により理想的な形で動画を視聴してもらえるように、パラメータを上手に活用していきましょう。