YouTube動画をWordPressや
その他のサイト・ブログなどに表示させる場合は、
埋め込みコードを入力する必要があります。
 

単純な埋め込みコードの取得は以下の方法です。

埋め込みたいYouTube動画の下にある
「共有」をクリックします。

 

表示された画面の「埋め込む」をクリックします。

 

埋め込みコードが表示されるので、
「コピー」をクリックします。

 

この時の埋め込みコードは以下。

<iframe width="560" height="315" src="https://www.youtube.com/embed/nUco7WocQlU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

このコードの中には、
枠を表示させないという意味の
パラメータが含まれています。

このパラメータを知っておくことで、
YouTube動画をサイトに埋め込んだ時の
表示方法を自由に選択することができます。
 

今回は、
YouTube動画の埋め込みコードをカスタマイズする方法
を紹介します。

YouTube埋め込みコードのカスタマイズ方法

上のコードを簡略化して、
以下を基本コードとして説明していきます。

<iframe width="560" height="315" src="https://www.youtube.com/embed/nUco7WocQlU"></iframe>

【<iframe>～</iframe>】は、
HTML5形式の動画プレーヤーで表示させるタグです。
 

これから紹介するパラメータを埋め込みコード内に入力する場合は、
動画IDの後に「?」を入力し、その後ろに入力していきます。
(各パラメータのコード例を参照)
 

modestbranding：YouTubeロゴの表示・非表示

 
【modestbranding】はコントロールバーの右下にある
YouTubeロゴの表示・非表示を指定することができます。

modestbranding=0：ロゴを表示する(デフォルト)
modestbranding=1：ロゴを表示しない

■コード例と表示例

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU?modestbranding=0“></iframe>

 

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU?modestbranding=1“></iframe>

autoplay：自動再生

 
【autoplay】はページを開いた際に、
動画を自動再生させるかどうかを指定することができます。

autoplay=0：手動再生(デフォルト)
autoplay=1：自動再生

■コード例

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU?autoplay=0“></iframe>

<iframe width=”560″ height=”315” src=”https://www.youtube.com/embed/nUco7WocQlU?autoplay=1“></iframe>

controls：コントロールバーの表示・非表示

 
【controls】は動画画面の下がにあるコントロールバーの
表示・非表示を指定することができます。

controls=0：非表示
controls=1：表示(デフォルト)

■コード例と表示例

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU?controls=0“></iframe>

 

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU?controls=1“></iframe>

start：開始位置(時間指定)

 
【start】は動画の再生開始位置を
指定することができます。(秒数で指定)

■コード例

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU?start=10“></iframe>

end：終了位置(時間指定)

 
【end】は動画の再生終了位置を指定することができます。(秒数で指定)

■コード例
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU?end=5“></iframe>

rel：関連動画の種類

 
【rel】は動画終了時に表示される
関連動画の種類を指定することができます。

rel=0：同じチャンネルにある関連動画を表示
rel=1：すべてのチャンネルの中から関連動画を表示

■コード例と表示例

チャンネル「AFFIKATSU」にある関連動画が表示されています。
↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU?rel=0“></iframe>

すべてのチャンネルの中から関連動画が表示されています。
↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU?rel=1“></iframe>

frameborder：枠線の表示・非表示

 
【frameborder】は動画画面に灰色の枠線を
表示させるか非表示にするか指定することができます。

※他のパラメータと違い、
動画IDの後ろに「?」を付けて入力する形ではないので注意。

frameborder=”0″：非表示(デフォルト)
frameborder=”1″：表示

■コード例と表示例

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU” frameborder=”0″></iframe>

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU” frameborder=”1″></iframe>

補足：複数パラメータの入力方法

 
パラメータを複数指定する場合は、
パラメータとパラメータの間に「&」を記述します。

■コード例

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU?rel=0&start=10“></iframe>
 
 

以上、YouTube動画の埋め込みコードを
カスタマイズする方法と各パラメータの意味を紹介しました。

他にもパラメータはありますが、
基本的にはこの記事内で紹介したパラメータを
理解しておけば十分です。

サイト内にYouTube動画を埋め込む際は
参考にしてみてください。