Responsive iFrames

By Zedric Myers | Published July 25, 2017 | Categories: Web Development

Sometimes your website needs iFrames inserted for things such as forms or third party plugins. What do you do when your site is responsive? Well, hopefully this can help you out with these tested examples.

There are different setup options you can take to make the iFrame responsive. Some may take more effort than others, but these options should take care of what you need.

Note: The iFrame content itself will need to be responsive and then we make the actual iFrame responsive. Most update to date and well-known sites that offer 3rd party products make their iFrame content responsive. It will depend on the company and something that should be considered to review if you need it to work for a responsive site.

First step before any of the below. Remove the width and height attributes from the iFrame code.

These are some examples of how to setup responsive iFrames for your website or things to check on to make them work.

The simple responsive iFrame using CSS (This method only covers the surrounding iFrame container width and not height.)
iframe, object, embed {
max-width: 100%;
}

NPR Responsive iFrame Example:
This setup requires the javascript file to be on the parent page and on the page being embedded through the iFrame child. This helps control the width and height of the iFrame to work for responsive layout.

http://npr.github.io/responsiveiframe/