Webサイト構築2018.03

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

企業サイトやECサイトで動画を活用するケースが増えてきました。また、企業側も以前は動画の著作権を気にして著作権保護ができる動画配信サービスを利用するプロジェクトが多かったのですが、最近では動画がソーシャルメディアでの拡 […]

執筆: 株式会社リソース・シェアリング ／公開日: 2018年3月27日

スポンサードサーチ

企業サイトやECサイトで動画を活用するケースが増えてきました。

また、企業側も以前は動画の著作権を気にして著作権保護ができる動画配信サービスを利用するプロジェクトが多かったのですが、最近では動画がソーシャルメディアでの拡散をされる方が望ましいという事で、YouTubeを利用するクライアントが大半となりました。

そこで、今回はYoutubeにアップロードした動画をWebサイトに埋込む方法についてご紹介します。

YouTubeの動画を埋め込む方法

まず、埋め込みたい動画をYouTubeで表示します。

今回は、WORLD ORDERの”ONE STEP FORWARD”のプロモーションビデオを例にしました。

この時に、タイトルの下にある「共有」をクリックすると、ポップアップが表示されます。

動画の埋め込みコードを取得する

ポップアップの下にある、「埋め込み」をクリックして埋め込みコードを取得します。

取得したコードはこちら。

<iframe width="560" height="315" src="https://www.youtube.com/embed/zMcTRiAq2Y4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

こちらのコードをコピー＆ペーストするだけでも動画の設置は可能です。

ただし、この状態だとレスポンシブ対応になっていませんので、端末によっては動画の全画面が表示されない場合があります。

そこで、スマートフォンやタブレットでの視聴を想定し、CSSを使って端末ごとに最適化するレスポンシブ対応にします。

CSSでレスポンシブ対応

まずは「movie」というクラスを持たせたdivタグで動画の埋込コードを囲います。

<div class="movie">

さらに、レスポンシブ対応にするCSSを追加します。

.movie{
	position:relative;
	width:100%;
	padding-top:56.25%;
}
.movie iframe{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
}

これを追加したサンプルがこちら。

YouTubeレスポンシブ対応デモ

これで、動画をレスポンシブ対応にできました。

Bootstrapの場合は用意されているものを使う

Bootstrapで作られているWebサイトの場合には、元々対応方法が用意されています。

参考：Bootstrap ：Embeds

以下のように、使いたいアスペクト比に応じてコードを使い分けます。

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

16:9だとこんな感じ。