Responsive iframe (google maps) and weird resizing

Question

I am trying to add a Google Map to my design, that is supposed to be responsive. I\'ve used the same code that works out for images... But for some reason, the map\'s iframe

Answer 1

This solution is from Dave Rupert / Chris Coyier (I think). It requires a wrapper div but works pretty well.

HTML

    

        
View Larger Map
    

CSS

.iframe-rwd  {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}