Google mapとかYouTubeとかレスポンシブでも縦横の比率を保つ

Googleマップ

<section id="map">
	<iframe>ここにGoogleマップのコード</iframe>
</section>

#map {
		height: 0;
		overflow: hidden;
		padding-bottom: calc(6 / 9 * 100%); //3:4比 3/4*100＝75(画像高さ ÷ 画像横幅 × 100%)
		position: relative;
		border: 1px solid #ccc;
		@include sm {
			padding-bottom: calc(1 / 1 * 100%); //3:4比 3/4*100＝75(画像高さ ÷ 画像横幅 × 100%)
		}
		@include xs {
			padding-bottom: calc(3 / 2 * 100%); //3:4比 3/4*100＝75(画像高さ ÷ 画像横幅 × 100%)
		}
		iframe {
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 100%;
		}
	}