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

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

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

埋め込みたいYouTube動画の下にある
「共有」→「埋め込みコード」をクリックすると、
埋め込みコードが表示されます。
YouTube埋め込みコードカスタマイズ 自動再生 タイトル非表示方法 共有 埋め込みコード
 

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

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mt7rGhAm2CY?rel=0&amp;controls=0&amp;showinfo=0″ frameborder=”0″ allowfullscreen></iframe>

 

このコードの中には
・動画終了後に関連動画を表示させない
・コントロールバーを表示させない
・タイトルバーを表示させない
・枠を表示させない

という意味のパラメータが含まれています。

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

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

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

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

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mt7rGhAm2CY”></iframe>

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

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

modestbranding:YouTubeロゴの表示位置

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

modestbranding=0:コントロールバーに表示(デフォルト)
modestbranding=1:タイトルバーに表示

コード例と表示例

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mt7rGhAm2CY?modestbranding=0“></iframe>
YouTube埋め込みコードカスタマイズ 自動再生 タイトル非表示方法 modestbrand 0
 

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mt7rGhAm2CY?modestbranding=1“></iframe>
YouTube埋め込みコードカスタマイズ 自動再生 タイトル非表示方法 modestbrand 1

autoplay:自動再生

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

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

コード例

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

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

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

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

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

コード例と表示例

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mt7rGhAm2CY?controls=0“></iframe>
YouTube埋め込みコードカスタマイズ 自動再生 タイトル非表示方法 control 0
 

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mt7rGhAm2CY?controls=1“></iframe>
YouTube埋め込みコードカスタマイズ 自動再生 タイトル非表示方法 control 1

autohide:コントロールバーとタイトルバーの表示・隠す

 
【autohide】は動画画面内にポインタがない時に、
コントロールバーを常に表示するか、
隠すかを指定することができます。

autohide=0:常に表示
autohide=1:隠す(デフォルト)

コード例と表示例

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mt7rGhAm2CY?autohide=0“></iframe>
YouTube埋め込みコードカスタマイズ 自動再生 タイトル非表示方法 autohide 0

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mt7rGhAm2CY?autohide=1“></iframe>
YouTube埋め込みコードカスタマイズ 自動再生 タイトル非表示方法 autohide 1

showinfo:タイトルバーの表示・非表示

 
【showinfo】は動画画面の上にあるタイトルバーの
表示・非表示を指定することができます。

showinfo=0:非表示
showinfo=1:表示(デフォルト)

コード例と表示例

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mt7rGhAm2CY?showinfo=0“></iframe>
YouTube埋め込みコードカスタマイズ 自動再生 タイトル非表示方法 showinfo 0

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mt7rGhAm2CY?showinfo=1“></iframe>
YouTube埋め込みコードカスタマイズ 自動再生 タイトル非表示方法 showinfo 1

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

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

コード例

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

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

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

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

rel:関連動画の表示・非表示

 
【rel】は動画終了時に関連動画を
表示させるか・非表示にするかを指定することができます。

rel=0:非表示
rel=1:表示(指定なしの時)

コード例と表示例

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mt7rGhAm2CY?rel=0“></iframe>
YouTube埋め込みコードカスタマイズ 自動再生 タイトル非表示方法 rel 0

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mt7rGhAm2CY?rel=1“></iframe>
YouTube埋め込みコードカスタマイズ 自動再生 タイトル非表示方法 rel 1

frameborder:枠線の表示・非表示

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

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

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

コード例と表示例

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mt7rGhAm2CY” frameborder=”0″></iframe>
YouTube埋め込みコードカスタマイズ 自動再生 タイトル非表示方法 frameborder 0

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/mt7rGhAm2CY” frameborder=”1″></iframe>
YouTube埋め込みコードカスタマイズ 自動再生 タイトル非表示方法 frameborder 1

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

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

コード例

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

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

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

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

 

最後まで読んで頂いてありがとうございました。

記事が価値あるものだと思われたら、
下のボタンからシェアをして頂けると嬉しいです。

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!
(PDFとサイト版の両方をプレゼント)
AFFIKATSUGuideBook

>> メルマガ登録はこちら <<

無料メールマガジン登録フォーム

メルマガ登録フォーム

苗字 (漢字で)
メールアドレス

※私からお送りする全てのメールに解除リンクを付けていますので、いつでもメルマガ解除をすることが可能です。




コメントを残す



コメントはサイト管理者が確認するまで表示されません。
他の読者さんにも有益だと判断した場合のみコメント対応を致します。

個別の問い合わせは【こちら】からお願いします。

CAPTCHA