Instagram Embeds

testing out the new instagram embed feature:

straight embed code

responsive container

so the problem with the embeds is that it’s not clean for responsive. i tried to add the same sorta code that i use for youtube videos, but it doesn’t seem to do the exact trick

.instagram-container {
  height: 0;
  overflow: hidden;
  padding-bottom: 116.0130718954248%; /* 710/612 */
  padding-top: 30px;
  position: relative;
  margin-bottom:20px;
}
.instagram-container iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

still trying to play around with this… stay tuned

suggestions

make the image double-clickable to like. this is one of instagram’s slickest features.. since it’s in an iframe, just make that functionality available. hell, even put a modal popup to comment!

update

so a new site has sprung up with code help for various services: embedresponsively.com. here’s how they tackle instagram:

<style>.embed-container {position: relative; padding-bottom: 120%; padding-top: 30px; height: 0; overflow: hidden;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='//instagram.com/p/cBYUSWPRmH/embed/' frameborder='0' scrolling='no' allowtransparency='true'></iframe></div>

which yields:

yep — pretty damn close to my code… i think i’m doing something right!

2 Responses to “Instagram Embeds”

  1. I used jQuery to make the Instagram iframe responsive. It’s nice to be able to do these things without resorting to JavaScript, but in this case it was the only way I found that I could achieve the desired results.

    Here’s an example on CodePen.

    Here’s a post on my blog where I am using it.

    • Joey says:

      interesting setup… i agree about having to use jquery, but that does a nice job without showing excess “white” background

      i’ll play around with that…

Leave a Reply