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

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

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

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

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

埋め込みコードが表示されるので、
「コピー」をクリックします。
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>
YouTubeロゴの表示
 

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU?modestbranding=1“></iframe>
YouTubeロゴの非表示

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>
Youtubeのコントロールバーの非表示
 

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU?controls=1“></iframe>
Youtubeのコントロールバーの非表示

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>
Youtubeの関連動画の種類-同じチャンネル内

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

frameborder:枠線の表示・非表示

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

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

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

コード例と表示例

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU” frameborder=”0″></iframe>
Youtubeの枠線の非表示

↓<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/nUco7WocQlU” frameborder=”1″></iframe>
Youtubeの枠線の表示

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

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

コード例

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

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

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

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

 

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

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

ブログの始め方・稼ぎ方をまとめたガイドブックをプレゼント中!

↓↓↓メルマガ登録は下のフォームから↓↓

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

メルマガ登録フォーム

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

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




コメントを残す



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

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