埋め込みコンテンツをレスポンシブに対応する方法

2017/06/22

YoutubeやGoogle Mapsなどの埋め込みコンテンツをレスポンシブ対応で表示する方法を説明します。埋め込みコンテンツの種類が何であれ方法は同じです。

サンプルコード

<div class="container">
	<iframe width="560" height="315"></iframe>
</div>

.container {
	position: relative ;
	height: 0 ;
	padding: 0 0 56.25% ;	/* ( 315 ÷ 560 ) × 100 = 56.25 */
}

.container iframe {
	position: absolute ;
	width: 100% ;
	height: 100% ;
	margin: 0 ;
	padding: 0 ;
}

デモ

positionの場合

元々の埋め込みコンテンツの要素(iframe要素など)を親要素(.container)で囲って下さい。paddingプロパティの値(56.25%)の箇所を調整します。ここには、埋め込みコンテンツの高さを横幅で割って、100をかけた数値を指定します。下記の例の場合、( 高さ=315 / 横幅=560 ) * 100 = 56.25となります。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
.container {
	position: relative ;
	height: 0 ;
	padding: 0 0 56.25% ;	/* ( 315 ÷ 560 ) × 100 = 56.25 */
}

.container iframe {
	position: absolute ;
	width: 100% ;
	height: 100% ;
	margin: 0 ;
	padding: 0 ;
}
	</style>
</head>
<body>
<div class="container">
	<iframe width="560" height="315" src="https://www.youtube.com/embed/EoV5RAgVD8w" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>

max-widthの場合

max-widthの場合、レスポンシブではありますが、アスペクト比が調整されません。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
iframe {
	max-width: 100% ;
}
	</style>
</head>
<body>
	<iframe width="560" height="315" src="https://www.youtube.com/embed/EoV5RAgVD8w" frameborder="0" allowfullscreen></iframe>
</body>
</html>

サンプルコード

デモ

positionの場合

max-widthの場合

関連記事