Responsive Instagram Iframe Using jQuery

Aug 2, 2013Ryan Burnette

I was recently working with a blog that featured embedded content from many social media sources. Instagram was one of them. The embeddable Instagram is great, but it doesn't naturally respond to fluid-width layouts.

Any other time I'd get that crunchy "you're doing it wrong" feeling if I styled with jQuery, but when dealing with this iframe I felt I had found an exception.

Here's an example in action as a CodePen.

Instagram embedded photos are always square, but they have a fixed-height header and footer. The plugin calculates a new height by adding the width to the heights of the fixed height elements.

I expanded a bit by allowing it to receive an options object to tweak it for various implementations. Read more about that it the Github repository.

Update January 2015

Instagram used to provide an iframe when you requested the embedded shortcode, but that has changed. They now give a bit of HTML content as well as a JavaScript include tag that appears to have similar functionality to my jQuery plugin.

If you're using any of the old iframes, my plugin can still help. But if you get the new embed code, nothing additional is needed for fluid layouts.

Farewell NYC

A photo posted by Ryan Burnette (@ryanburnette) on

Blog Index