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%;
	}
}