問題 × 解決策

Youtube動画の埋め込みをレスポンシブ対応にする方法

問題

Youtube動画の埋め込みをレスポンシブ対応にするには?

解決策

  1. Youtubeの埋め込みコードをdiv等のタグで囲い、そのタグに「position: relative;」を設定し、「padding-top」で埋め込み動画の高さ÷幅のパーセンテージ(%)を設定します。
  2. 埋め込み動画のiframeタグに幅、高さ共に100%を設定し、さらに「position: absolute;」で4方向全てを0にし、「margin: auto;」を設定します。

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;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

20 − 19 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧