Responsive Images — 6 Simple Ways

Bandwidth is precious on mobile networks, so it helps to serve users on smaller screens a smaller image. Learn how to serve up specific images depending on device with these techniques.

Like with most things in the development arena, there’s more than one way to skin a cat. In the case of CSS responsive images, the story is no different. In this post we’ll go over the top techniques for making responsive images. Continue reading “Responsive Images — 6 Simple Ways”

Responsive Iframes — The Right Way (CSS Only)!

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.

“Responsive Iframes — The Right Way (CSS Only)!” was originally published on the 19th of March 2014, last updated July 24, 2018 to reflect emerging trends.

Responsive iframes are a cinch! Jump start using the responsive iframe CSS (using intrinsic ratios) shown below to make your iframe responsive. You’ll never ask ‘how to make iframe responsive’ again!

View Demo View Code

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
The responsive iframe CSS above demonstrates how to transform a normally fluid iframe into a responsive iframe. Just be sure to update the padding-top property to reflect the aspect ratio to make iframe responsive.

Continue reading “Responsive Iframes — The Right Way (CSS Only)!”

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.

[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: