Responsive IFrames — The Right Way!

Building responsive IFrames can be frustrating. Don’t let an IFrame break your beautifully laid out responsive site. Learn how to build responsive IFrames the right way with just a few lines of CSS.

You’ve spent countless hours designing and building the perfect responsive site. One problem — iframes. Proportionally resizing these pesky little windows to another world can be frustrating. It’s easy enough to make an iframe’s width span 100% of its container. Rather, making the height resize accordingly can be tricky.

So how do you keep from blowing your top trying to make responsive iframes?

Responsive IFrames

Most implementations I’ve seen require the use of JS, like Pym.js. This can cause unexpected behavior depending on the device and browser version — Pym.js only goes back to IE9. Wouldn’t it be nice if there was a way to make responsive iframes without using a dirty little code snippet? There is! It’s name is the CSS intrinsic ratio technique — or what I like to call, ‘Magic iframes!’. Continue reading “Responsive IFrames — The Right Way!”

Resize Videos Proportionally with Intrinsic Ratios

Ever wanted to resize videos while keeping the same aspect ratio in your responsive designs? Check out this easy to implement, CSS only technique that allows videos to be resized on the fly!

Ever wanted to resize videos while keeping the same aspect ratio in your responsive designs? Check out this easy to implement, CSS only technique that allows videos to be resized on the fly!

I recently came across a great CSS technique to scale videos like you would images. As the width of the video decreases, the height of the video changes accordingly to keep to same aspect ratio. Currently, this is difficult to do when just setting the width to 100% due to the height remaining constant. Using the intrinsic ratio technique allows the browser to determine video dimensions based on the width of the parent container.

With intrinsic dimensions, a new width triggers a new height calculation, allowing videos to resize and giving them the ability to scale the same way images do. See example one.

CSS Intrinsic Ratio Technique

To accomplish this little piece of CSS magic, we’ll create a box with the proper aspect ratio (4:3, 16:9, etc.), then make the video inside that box stretch to fit the dimensions of the box. Simple stuff!

Where the magic happens…

padding is the secret to the intrinsic ratio technique. To accomplish, we’ll set the bottom padding of the parent container to a percentage based on it’s width. To create this “magic wrapper”—a container that proportionally resizes itself, check out the code below:

How it Works

First, let’s break down the .video-container rule:

position: relative
Declaring position: relative makes all child elements position themself in relation to this container.

padding-bottom: 20%
This is where the real magic happens. It gives the container box a specific format. Using 20% for padding makes the height of the box equal to 20% of its width. You’ll have to adjust this accordingly to match your videos aspect ratio.

[message type=”info”]Why use padding-bottom instead of padding-top? Simple answer, IE. IE5 removes the “space” created via padding-top—yeah, IE is a little slow.[/message]

height: 0
This gives the element “layout” so that slow IE5 and IE6 will render the dimension of the inner container properly. Learn more “On having layout.“.

[message type=”info”]Again, since IE is a little slow, you should not use width: 100% as a layout trigger. This will cause the box to expand to fill it’s container rather than respect the width we set for the parent container.[/message]

Now, let’s look at the .video rule:

position: absolute
This frees the video from the height boundary of its parent and allows the it to be positioned over the “padding area”.

top: 0
Positions the video at the top of it’s parent container.

left: 0
Positions the video on the left side of it’s parent container.

width: 100%
This makes the video stretch to fill the height of its parent container.

height: 100%
This makes the video stretch to fill the height of its parent container.

That’s it! Now you’ll have a video that keeps it’s aspect ratio our responsive designs.


Learn more about the CSS intrinsic ratio technique: