A place where we write words Ignition Blog

Welcome to the Ignition Development blog, where we talk about a wide range of technical and non-technical topics.

Responsive iframes

Posted on Monday, September 4, 2017 3:10 PM

If you’ve worked with websites for any length of time then the chances are high you’ve had the joyous experience of having to use an iframe to embed some content in a page, and watching the havoc it can wreak with your carefully created styles and layout. The very nature of displaying a piece of content (or even a full page) inside another web page (embedding it) is one with a lot of complexities, and because of that the iframe is less flexible than other HTML elements regarding options for sizing and positioning.

Whether we like it or not iframes are going to make it into website designs. They may be YouTube videos, 3rd Party animations or other content and making them work nicely inside your responsive design is essential.

At first glance this looks like an impossible task, however it is possible and here’s how:

We’ll use the example of a video however this approach works in other instances too. The only requirement is that your iframe has a fixed ratio.

iframe image 1

You probably started out with something that seemed pretty obvious. A simple bit of CSS to ensure your iframe spans a maximum of 100% of the available width. That way we know it will never be wider:

iframe image 2

However, that doesn’t set the height. In the example above as long as your iframe is inside a div 500px wide then everything looks great. As soon as you go below 500px you end up with a bunch of dead space around your image. YouTube is a little kind with this and adds black to the top and bottom. It’s okay, but it’s not as nice as the clean look we started with:

iframe image 2
This approach works well when our iframe is inside a div at least 500px wide.

iframe image 2
On smaller devices our iframe becomes too tall for the content. Here YouTube has kindly added a black background.

We need a way to set the correct height, and to vary it depending on how wide our screen is.

The way to do this is to add a wrapper div to the iframe and to position the iframe absolutely inside that wrapper:

iframe image 3

Now our iframe will always fill our wrapper div. Next we need to tell the wrapper div how high it should be. This is the magic bit, let’s set the height so it can vary depending on the width. We do that using padding-top. When setting padding as a percentage value it is calculated to be that percentage of the element’s width which is exactly what we need here.

Work out what percentage of the width the height should be:

Divide the height of your iframe by the width and multiply by 100.
height/width x 100 = percentage padding to use
In our case 281/500 = 56.2
We’ll drop the .2 and use 56% as our padding-top value:

iframe image 4

iframe image 5

Now our iframe takes up exactly the same amount of space as our video-wrapper. The wrapper’s height is 100% made up from the top-padding.

When you make your viewport smaller the video-wrapper will resize both in width and height mimicking the proportions of your iframe and the iframe will always fit.

iframe image 6

iframe image 7

As long as companies like YouTube are pushing iframes as their embedding and sharing technology of choice then there’s little chance that they’ll be going away in a hurry. With this tip in your toolbox you’ll be able to embrace the convenience and “quick hack power” they possess without your site’s responsiveness needing to suffer.

- Tracey


No comments posted yet.

Would you like to post a comment?

Post title
Your name
Your email (optional)  
Website (optional)

What do you want to say?


Please add 2 and 2 and type the answer here: