I’ve been design a lot of websites for sport studio lately, and they often need google maps which uses iframes which by default only comes in 3 sizes: small @400px X 300px, medium @600px X 450px and large @800px X 600px. Which is great if you know the EXACT size of the end user’s screen size, since that’s not possible, we need to make them responsive with the little tiny bit of HTML and CSS

ORIGINAL
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d59067.01774355863!2d113.92182782515583!3d22.289782504003966!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sairport+near+Hong+Kong!5e0!3m2!1sen!2s!4v1425565266119" width="800" height="600" frameborder="0" style="border:0"></iframe>

NEW HTML
<div class="responsive-map"> 
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d59067.01774355863!2d113.92182782515583!3d22.289782504003966!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sairport+near+Hong+Kong!5e0!3m2!1sen!2s!4v1425565266119" width="800" height="600" frameborder="0" style="border:0">
</iframe>
</div>

NEW CSS
<style>
 .responsive-map {
 position: relative;
 padding-bottom: 75%; // This is the aspect ratio
 height: 0;
 overflow: hidden;
 }
 .responsive-map iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100% !important;
 height: 100% !important;
 }
</style>

The Result

 
Thank you for this handy script from Digital Inspiration