quick and easy way to make google maps iframe embed responsive [closed]

Question

I was looking for a quick and easy method for embedding a google map (via their embed code) into a responsive site and apply the responsiveness to the map as well.

Generally the iframe will refuse to resize with your media queries or with the div its contained within which always frustrated me, and I hate to use plugins if there really not needed such as responsive google map plugins. See my solution below.

Answer 1

If your just using the google maps (or any other embed such as youtube, soundcloud etc.) IFRAME embed you can make it responsive by simply adding this to your CSS.

iframe, object, embed{max-width: 100%;}

If your container/theme is responsive this will work great. Essentially this will work with ANY iframe and not just limited to google maps. But keep in mind if you have other iframes on your site they will as well become responsive.