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

公開日: 2018/03/27　更新日: 2018/03/27

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

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

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

スポンサードサーチ

1 YouTubeの動画を埋め込む方法
- 1.1 動画の埋め込みコードを取得する
2 CSSでレスポンシブ対応
3 Bootstrapの場合は用意されているものを使う
4 WordPressの場合、「AddQuicktag」でボタン追加

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だとこんな感じ。

WordPressの場合、「AddQuicktag」でボタン追加

WordPressを使っている場合、このdivタグを埋め込むのにPlugin（プラグイン）の「AddQuicktag」を使って予めボタンとして登録しておく事で、簡単にレスポンシブ対応にできます。

「AddQuicktag」の使い方については、AddQuicktagの使い方デザイン性の高いクライアントワークに必須なWordPress Pluginをご覧ください。

WebサイトやECサイトに動画の埋込を検討されてる方は、ぜひやってみてください。