Responsive iframe - An easy bug fix

Hurray! One bug less. I managed to find out how to implement a responsive html iframe.

Context

We noticed that the iframe content on our pages look fine on desktop, but flow off the screen on mobile devices. I know enough to suspect that this is an issue related to the lack of responsive web design. After a bit of searching, I found a quick way to fix this, and thanks to that now the iframe look as expected on mobile devices too. So how did I do it?

Hang on! What’s an html iframe and responsive web design?

We need to build anticipation before the big reveal. So let’s look at what an html iframe does, and what responsive web design is.

An html iframe is essentially a way to embed a web page or other web media on another webpage. Often this is used to embed YouTube videos, Google forms, or Twitter feeds on a site. It is a way to crop some content, and insert it elsewhere.

Just like other media and html tags, you can style html iframe tags too, for example to determine their aspect ratio, or to put a border around them. You can even give this area of your page a title, that is to name the html iframe, such that screen reader users know what the frame contains. Unfortunately, often the title attribute is excluded by web developers.

Now a word on responsive web development. Historically, style sheets defined what the content looks like on a given screen size. If you wanted a picture, which filled the whole screen on your PC monitor, you would have had the same size picture on a much smaller monitor too, meaning you only see part of the media. A philosophical question could be, does the rest of the image exist? Or for those of you who are familiar with quantum physics, is the cat alive or not?

As you can imagine, with the invention of smart phones, tablets, laptops, and large screen displays, the lack of responsive content quickly became a challenge. Hence, responsive web design was invented to automatically account for different display sizes.

The solution

Okay, now it is time to record the fairly simple solution to our run-away html issue. The solution comes in two steps.

Step 1: Add an html container around the iframe

We wrap the iframe in a <div> tag, and assign a css class, such that we can style this container. Then, we also need to add a second class to the iframe itself. This looks like this:

<div class="iframe-container">
<iframe class="responsive-iframe" src="*"></iframe>
</div>

Step 2: Add the respective css classes

The key is to move away from an absolute value of width and height, and use a percentage value for sizing our container of the iframe. This is how:

.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

Now we need to stretch the iframe to touch the borders of the iframe container, as we already set this container up to our liking.

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

That’s it really. Simple and quick solution, which I found on the W3C tutorial site.

Further reading

If you want to dig deeper, have a look at the following links:

1. What is an html iframe?
2. What is responsive web design?