Responsive IFrames

A Code Addendum for Responsive 3rd Party Content

December 3, 2014

An IFrame, short for Inline Frame, is an HTML document embedded inside another HTML document. Typically, IFrames serve 3rd party content such as a YouTube video. IFrames can be seamlessly added to the page so that the user is unaware that the content is being hosted and managed by another source. An out-of-the-box IFrame will have a fixed size and is likely to disrupt a responsive, fluid layout.

Web Tools

It’s pretty easy to get your IFrames to behave responsively with the Embed Responsively Tool. If you are embedding a bunch of content with various screen proportions, you can add some JavaScript based on Chris Coyier’s article.

Add scrollbars

If the content of your IFrame is too large for your page, you’ll need to add scroll bars for Webkit touch devices. I had to do this when embedding Matching Gifts content from a 3rd Party site on Rensselaer’s Giving Website. The Embed Responsively code will get you close, but Chrome on an iPhone wouldn’t scroll. Scrolling would scroll the main page, not the IFrame within it. Check out this CodePen for my solution. Happy IFraming!

See the Pen Responsive IFrame by Chameides (@chameides) on CodePen.