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%;
}
}
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>
デモ
コメント