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

以下は、percentageを使用した例です。
少しだけシンプルになります。

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