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