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!