Responsive IFrames

The What and Why

IFrames are commonly used to allow embedding of third-party content. Many popular services, such as YouTube and Facebook, make extensive use of IFrames in their embeddable widgets.

On a responsive website, all page components must be responsive. There are multiple ways of making an IFrame responsive. Some responsive IFrame use-cases can be solved with simple Javascript and CSS. Our library targets a challenging use-case in which embedded content:

• Can have unknown width and height
• Can have unknown width/height ratio
• Can change its width or height as users interact with dynamic content and we want the size of the IFrame to change accordingly to avoid scrollbars.

Making IFrames with such constraints is a challenging task. We developed this tiny (0.9KB minified and gzipped) jQuery plugin, at NPR, to make the task easier.

For simpler use-cases, e.g. targeting the embedding of fixed ratio video content, you may want to check-out: FitVid.js, instead.

Getting Started

Due to browser security constraints, you will have to include the Javascript file both in the “parent” page, as well as in the page being embedded through an iframe (“child”).

In the current version, the parent page must include the latest version of jQuery. There is no dependency on jQuery for the child page functionality. In future versions, we would like to remove the dependency on jQuery for the parent as well.

Note: the “xdomain” parameter in the makeResponsive() function call is optional.

Code Sample

<!-- 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>