こちらでは、YouTube動画の埋め込みコードのカスタマイズを中心に紹介します。

コード追加時の注意事項

追加コードは必ず、半角英数字にて入力して下さい。

また、↓がYou Tubeの基本埋め込みコード例となりますので、記事の参考にしてください。

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

終了時に関連動画を表示しないようにする

YouTubeでは、デフォルトの埋め込みコードでは関連動画が表示されるようになっています。特に気にしなければよいのですが、特にアフィリエイトや商品アピールの場合、他の動画にユーザーが流れていってほしくないこともあります。

このような場合、基本URLコードの後ろに？をつけて、rel=0と追加すれば関連動画は表示されなくなります。

なお、基本URLとは【src=】の後に続く””内の【https;//】から始まるコードのことを言い、【?rel=0】は必ず””内に収めるように記述してください。

 
  src="（取得したURL）?rel=0"
 

rel=0を追加後の動画

再生してみると、確かに関連動画の表示がされなくなりましたね！

繰り返し再生させたい

動画を繰り返し再生させたい場合の追加コードです。例えばトップページでYouTube動画を使用する場合などに使えるかもしれません。

追加コード

このような場合、基本URLコードの後ろに？をつけて、loop=1&playlist=<Video ID>を追加すれば、動画終了後も自動的に再生されます。

基本URLとは【src=】の後に続く””内の【https;//】から始まるコードのことを言い、【?loop=1&playlist=(video id)】は必ず””内に収めるように記述してください。また、Video IDとは基本URL内の固有のコードとなり、ここでは【LgaaHvPqgWQ】となります。

 
  src="（取得したURL）?loop=1&playlist=LgaaHvPqgWQ"
 

loop=1&playlist=Video IDを追加後の動画

動画が連続して再生されます。

なお、この記事を執筆時の2018年11月現在、単純にloop=1を追加すれば繰り返し再生がされるという情報がネット上で多くありますが、それは特定の条件下におけるもので、2018年11月現在は↑のようにplaylist=Video IDを追加した場合のみ連続再生されますのでご注意ください。

CSSの追加

スマホで見るとサイトの幅と合わない場合

ただ埋め込むだけなら↑の方法で可能ですが、見る環境によって動画のサイズが合わず、例えばスマホだと元々のサイトの幅から飛び出だしてしまい恰好が悪くなることがあります。

この場合、CSSに下記を追加すればレスポンシブ対応にできますが、他にもiframeによる表示をしているサイトの場合、サイト全体に影響を及ぼす場合もあります。その際には、クラス属性を追加するなどして対処することができますので試してみてください。

 
  iframe{ width: 100%; }
 

YouTubeサイトで行うこと

手順01

まず、サイトやブログに埋め込みたい動画を選び、赤く囲んだ『共有』ボタンを選択します。

手順02

するとURLが表示されているウィンドウが出てきますので、赤矢印の『埋め込む』ボタンを選択します。

手順03

続いて下記のようなウィンドウが出てきますので、表示されているHTMLをコピーすることで挿入する動画の埋め込み用HTMLを取得する事ができます。

手順04

基本的には、上記で取得したHTMLを、自分のブログやサイトの埋め込みたい任意の場所に貼りつけるだけで埋め込みは完了です。