Youtube動画をサイトに埋め込む方法

Youtube動画をサイトに埋め込む方法をご紹介します。

基本的な埋め込み方法

1．埋め込みたい動画のページにアクセスします。
 
2．「共有」をクリックします。

 
3．「埋め込む」を選択します。

 
4．「コピー」をクリックして、コードをコピーします。

 
5．サイトの任意の位置にコピーしたコードを貼り付けます。

 

 

DEMO

埋め込みサイズの指定

width=”560″ height=”315″　の箇所を任意の数字に変更し埋め込みます。
サイズを変更する場合は、YouTubeのデフォルトの縦横比（アスペクト比）16:9 を保つと、動画が歪むことなく、視覚的に自然に表示されます。

 

DEMO

自動再生（autoplay）

自動再生させるには、 autoplay=1 を追加します。

 

DEMO

ミュート再生（mute）

消音（ミュート）で再生させるには、 mute=1 を追加します。

 

DEMO

ループ再生（loop）

ループ再生させるには、 loop=1 を追加し、さらに playlist パラメータで動画IDを指定する必要があります。

 

DEMO

インライン再生（playsinline）

通常、iOSのYouTubeアプリやSafariでは、動画がフルスクリーンで再生される仕様になっています。
playsinline=1 を追加すると、インライン再生（ページ内再生）が可能になります。

 

DEMO

再生開始位置の指定（start）

&start=秒数 を指定すると、動画の指定した秒数から再生されます。
&start=10 とした場合、動画の10秒の地点から再生されます。
&end=秒数 と組み合わせると、指定範囲内の再生が可能です。（例：&start=10&end=30）

 

DEMO

再生終了位置の指定（end）

&end=秒数 で再生終了位置（秒数）を設定できます。
&end=30 を指定すると、動画の30秒地点で再生が終了します。

 

DEMO

YouTubeロゴの表示設定（modestbranding）

modestbrandingを追加することで、YouTubeロゴの表示の仕様を以下のように変更できます。

・modestbranding=0（デフォルト）
YouTubeのロゴが動画のコントロールバーや右上に表示される

・modestbranding=1
右上のYouTubeロゴは非表示になるが、コントロールバーのYouTubeアイコンは残る

 

DEMO

関連動画の表示設定（rel）

関連動画を完全に無効にはできませんが、rel=0 を追加することで、再生した動画と同じチャンネル内から関連動画が選択されるようになります。

 

DEMO