お知らせ / ブログINFO / BLOG

2019.06.20

CSS

【CSS】iframeのレスポンシブについて

今ではあまり使わなくなりましたが、Youtubeの埋め込みなどiframeを使う場面がまだたまにあります。
今では標準になったレスポンシブデザインもiframeに対応出来ないかなーっと思って調べたらありました。使いやすいやり方です。

HTML

iframeをdivで囲います。クラス名やidはお好きな名前を付けて下さい。
今回はYoutubeの埋め込み用iframeです。

<div class="framewrap">
	<iframe src="https://www.youtube.com/embed/V0XBrPPVHc0" allowfullscreen></iframe>
</div>

CSS

iframeを囲っている親ブロックを基準にiframeをposition:absolute;で配置し、padding等で高さを可変で確保します。

.framewrap {
	width:100%; /* 必要なwidth値を指定 */
	padding-top:56.25%; /* width値に対して必要な高さ分の%値を指定 */
	position:relative;
	overflow:hidden;
}
.framewrap iframe {
	width:100%;
	height:100%;
	border:none;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

上記のようにする事で、iframeもレスポンシブ化可能です。
便利で簡単なのでこのやり方が標準でいいですね!

最新記事

カテゴリー