scss 谷歌地图のiframe版をレスポンシブに対応させる

Posted 2021-05-17

<div class="map-wrap">
  <iframe src="https://maps.google.co.jp/maps?output=embed&q=ここに住所が入ります&z=16" width="1000" height="400" frameborder="0" scrolling="no" ></iframe>
  <!--パラメータは適時変更してください  -->
</div>

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