I use this particularly for Google Maps, which were never responsive by default. Of course it could have changed and I never noticed! Also has come in useful for YouTube videos, or anything really where you need to display something from an external source in an iframe.
You just need to place the iframe in a parent div tag and then target it with the following CSS rules. Adjust the bottom padding to get the desired height of the iframe.
Responsive iframes CSS
/* Responsive google maps */
#google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
#google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
Responsive iframes example HTML
<div id="google-maps">
<iframe src="/iframesource" width="800" height="390" style="border: 0;" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</div>
