Responsive embedding of Google Maps (or anything <iframe> embedded really).

README.md

Responsive Google Maps embedding

Simple technique for embedding Google Maps <iframe>'s responsively using a padding-bottom percentage trick, which when applied to a block element will be calculated as a percentage of the element width - essentially providing an aspect ratio.

This technique should work on anything that is <iframe> embedded from your social network/service of choice.

googlemap.css

.container {
	height: 0;
	overflow: hidden;
	padding-bottom: 60%; /* desired aspect ratio */
	position: relative;
}

.googlemap {
	border: 0;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

googlemap.html

<div class="container">
	
	<iframe
		class="googlemap" frameborder="0" scrolling="no"
		src="https://maps.google.com.au/maps....&amp;output=embed"></iframe>

</div>