[CSS]Google MapsやYoutubeなど埋め込みiframeのレスポンシブ対応

CSS

2019.05.022021.03.10

CSS
HTML
デモ

CSS

.iframe_container	{
	width: 100%;
	margin: auto;
	padding: 0
}
.iframe_container iframe {
	width: 100%;
	height: 500px;
	border: none
}

@media only screen and (max-width:520px) {
	.iframe_container	{
		width: 100%;
		height: auto;
		position: relative;
		padding-bottom: 50%;
		overflow: hidden
	}
	.iframe_container iframe	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	} 
}

.iframe_container {

width: 100%;

margin: auto;

padding: 0

}

.iframe_container iframe {

width: 100%;

height: 500px;

border: none

}

@media only screen and (max-width:520px) {

.iframe_container {

width: 100%;

height: auto;

position: relative;

padding-bottom: 50%;

overflow: hidden

}

.iframe_container iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

HTML

<div class="iframe_container">
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.493037452459!2d139.71020496525904!3d35.689483030192314!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ce9cc315b03%3A0xe99f6c02ec60470e!2z44CSMTYwLTAwMjIg5p2x5Lqs6YO95paw5a6_5Yy65paw5a6_77yR5LiB55uu!5e0!3m2!1sja!2sjp!4v1615219432040!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>