(German version of this article)

In the last week I dealt with an interesting problem during my work: I wanted to implement an <iframe>-element into a responsive website that holds a non-responsive website. It's not difficult to imagine which problem is coming up soon — on smaller screens, while the parent-website behaves nicely, the contents of the <iframe> keep their initial dimensions and don't "respond" to the current window-width.

Fortunately there's a way to solve this problem: CSS transforms to the rescue! The whole <iframe>-element — including its contents — can be scaled down like an image with the help of transform: scale(…);.

Example-Pen in full-screen mode

So in order to get this working you first have to define a breakpoint, at which the scaling starts. You can easily detect this point by scaling down your browser window. Take the window-width shortly before the horizontal scrollbar appears inside the <iframe>.

  var BREAKPOINT = 1060; // (Arbitrary value!)

Now we have a reference. The next task is to get the current scale-value. This is easy in theory, we just have to divide the current window-width by the breakpoint. In practice I experienced that this scale-value is too big on smaller screens and the horizontal scrollbar re-appears inside the iFrame. So I threw in a little Math.pow to reduce the result.

  var scale = Math.pow(window.innerWidth / BREAKPOINT, 1.2);

Actually we have everything we need now: a breakpoint, that indicates wether to scale or not, and a scale-value. But if we set the CSS-transform-value on the <iframe>-element, we experience something odd — the scaling of the iFrame's content is rather subtle, whereas the scaling of the <iframe>-element itself is really massive. It's just shrinking into the middle of the page with its horizontal scrollbar staying where it is.

That's the opposite of what we wanted to achieve. But luckily there's a solution to this: we have to enhance the dimensions of the iFrame while it is scaling down with the inverse of the scale-value.

  var scale = 0.8; // (Arbitrary value!)
var width = 100 / scale; // Width in percent
var height = INITIAL_IFRAME_HEIGHT / scale; // Height in px

If we set this width- and height-values to the <iframe>-element, it's behaving like a responsive element again, while its content gets scaled down. This is the behaviour we were looking for.

There's only one last problem that might pop up. If your <iframe>-element floats in the center of your website with margin: * auto, you will have to center the transform-origin by giving the iFrame transform-origin: center top.

As a result the iFrame will start to move to the right side likely becoming partly invisible. To switch off this behaviour we have to apply a negative, horizontal offset.

  var width = 100 / scale; // Width in percent
var offsetLeft = (width - 100) / -2; // Offset to the left in percent

With this offset-value the <iframe>-element stays in the center of the site.

That's it. If you have questions or improvements write a comment or ping me on twitter: @Herschel_R


18,113 0 8