YouTube埋め込みコードカスタマイズ！自動再生やタイトル非表示

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

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

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

 

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

 

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

 

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

 

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

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

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

 

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

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

 

は、HTML5形式の動画プレーヤーで表示させるタグです。

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

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

 

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

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

■コード例と表示例

autoplay：自動再生

 

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

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

■コード例

 

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

 

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

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

■コード例と表示例

 

 

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

 

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

■コード例

 

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

 

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

■コード例

 

rel：関連動画の種類

 

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

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

■コード例と表示例

チャンネル「avex」にある関連動画が表示されています。

 

すべてのチャンネルの中から関連動画が表示されています。

 

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

 

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

■コード例

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

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

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

関連記事→ WordPress賢威でYouTube動画をレスポンシブ(スマホ)対応にする方法