Responsive IFrames Plugin For jQuery

Responsive IFrames Plugin can be used to create a  Responsive IFrame which can change its width or height as users interact with dynamic content and avoid scrollbars.

It is very lightweight, you can produce the effect only with jQuery and ResponsiveIFrames.js.

How to use it:

Include jQuery script and ResponsiveIFrames.js in the parent page

<!-- Activate responsiveness in the "child" page -->
<script src="/js/jquery.responsiveiframe.js"></script>
<script>
  var ri = responsiveIframe();
  ri.allowResponsiveEmbedding();
</script>
  
<!-- Corresponding code in the "parent" page -->
<script src="/js/jquery.js"></script>
<script src="/js/jquery.responsiveiframe.js"></script>

<script>
  ;(function($){          
      $(function(){
        $('#myIframeID').responsiveIframe({ xdomain: '*'});
      });        
  })(jQuery);
</script>

Change log:

2013-11-11

• bugs fixed

---

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