Googleマップをレスポンシブに対応させるタグ テンプレ

html

<div class="googlemap">
<!--ここにgooglemapの埋め込みタグ挿入　下記は例-->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1620.4218482046147!2d139.76625067604036!3d35.680850473725954!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1621378058031!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<div>

scss,sass

.googlemap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
}

css

.googlemap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.googlemap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}