jQuery Plugin For Responsive iFrame Embedded Content - Responsive Instagram

Responsive Instagram is a small jQuery plugin used to make iframe embedded Instagram posts (or Youtube & Vimeo videos) responsive depending on the screen size. It maintains aspect ratio of the embedded content across varying widths.

How to use it:

1. Load the latest version of jQuery library and the jQuery Responsive Instagram plugin in the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.responsiveinstagram.js"></script>

2. Embed Instagram posts or Youtube videos into your webpage.

<iframe src="//instagram.com/p/aWUm2GFPmC/embed/" width="612" height="710" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gLGbRSn3MDY" frameborder="0" allowfullscreen></iframe>

3. Initialize the plugin to make the Instagram posts or Youtube videos responsive.

$(document).on('ready', function () {
  $('iframe[src*="instagram.com"],iframe[src*="youtube.com"]').responsiveInstagram();
});

4. Re-init the plugin on window resize.

$(window).on('load resize',function () {
  $('iframe[src*="instagram.com"],iframe[src*="youtube.com"]').responsiveInstagram();
});

5. Available options.

$('iframe').responsiveInstagram({

  // The width matches the original width of your iframe.
  width: 610, 

  // The total of the header and footer of the embed
  extraHeight: 80, 

  // The breakpoint determines the difference between when the plugin will leave the iframe at its maximum, predetermined width and when it will calculate it. 
  // This number is checked against the window width so it may vary greatly from the width of the container around your iframe. 
  // The default is 620 but this option will almost always need to be adjusted.
  breakpoint: 620
  
});

---

This awesome jQuery plugin is developed by ryanburnette. For more Advanced Usages, please check the demo page or visit the official website.