Youtube動画をそのまま埋め込むと、スマートフォン時にはみ出てしまう。

Youtubeの動画の埋め込みコードであるiframeは、デフォルトでは幅（width）が設定されています。
なのでそのままですとスマートフォン時にはみ出してしまいます。
そんな時のために、Youtube動画の埋め込みをレスポンシブ対応にする方法をご紹介します。

Youtubeの埋め込み動画を任意のタグで囲います。

Youtubeの埋め込み動画のコードをdiv等のタグで囲い、クラスを設定します。

<div class="iframe-wrapper">
	<!-- Youtubeの埋め込みコード -->
	<iframe width="560" height="315" src="https://www.youtube.com/embed/..."></iframe>
</div>

CSSはこちら

1. Youtubeの埋め込みコードを囲ったタグに「position: relative;」を設定し、「padding-top」で埋め込み動画の高さ÷幅のパーセンテージ（％）を設定します。

   デフォルトは幅560px、高さ315pxのため、315÷560=56.25%をpadding-topに設定します。

2. 埋め込み動画のiframeタグに幅、高さ共に100%を設定し、さらに「position: absolute;」で4方向全てを0にし、「margin: auto;」を設定します。

.iframe-wrapper{
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 幅560px：高さ315pxでの想定 */
}
.iframe-wrapper iframe{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	botom: 0;
	left: 0;
	margin: auto;
}