jQuery Responsive IFrames - Turn Your Complex IFrames Into Responsive Goodness NPR-Style

jQuery Responsive 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. NPR developed this tiny (0.9KB minified and gzipped) jQuery plugin to make the task easier.

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.

Requirements: jQuery
Demo: http://npr.github.com/responsiveiframe/demo1
License: MIT License

Daily Posts, Be Updated, Subscribe:

Want Free Web Resources? Enter Your Email And We'll Send It To You - Daily! (265+ Subscribers)

Yup, it's that straight forward! Enter your email address below and we'll send you the latest web resources to your inbox, everyday. We don't do spam. Ever.

Your Email Address

Trending Posts On Functionn This Week

Share:

Other Interesting Resources: