Fork me on GitHub

Hello my name is Pui, I am a web developer based in London with over 8 years experience.

Responsive iframes - height and width for website content

30 September 2014

So sometimes circumstances need be for an iframe to be part of the page. An iframe which brings in content from another place. When this is the case, you don’t want it looking like an iframe, right? You don’t want scrollbars appearing when the content is bigger than the iframe itself.

Also what do you do when your site is responsive? You’d want the iframe to be responsive as well. So here it goes:

My demo here: Responsive Iframes

1) Create your iframe and your outer page so that it is responsive.

2) First off I used standard technique to make video embeds responsive. It is the same technique outlined in Smashing Magazine about Making Embedded Content Work in Responsive Design. This technique only makes the width responsive for the iframe and not its height. So we’re half way there.

3) To make the page respond to the iframe’s height I used ResponsiveIframe.js plugin. In order for it to work, jQuery needs to be called on the iframe page as well as the outer page. Also it should be at the bottom of the page, but in my demo I have stuck it in the head to replicate some restraints that I have on a project.

4) Voila, your iframe is now responsive in width and height! Again, see my Responsive iframes demo here for example.

About the author

Pui-Ling Lau, front end web developer and designer based in Kent and London

Pui is a User Experience developer working as a contractor in and around London.