Rundown of Handling Flexible Media

aad-ban

When you take the responsive web design route, part of the deal is fluid grids. That is, container elements set in percentage widths. Just one example: an <article> that holds a blog post might be 320px wide on a small screen device and 690px wide on some large screen. Text can be resized and will flow nicely to fill a container. That’s not too hard. But media – images, video players, and audio players – demand a bit more attention (e.g. a video that sticks off the edge of the screen == bad). This post is to round up the methods of handling that.

Flexible Images

flexible-images

If you’re comfortable with IE 7 and up support. This little beauty will do you fine:

img {
  max-width: 100%;

  /* just in case, to force correct aspet ratio */
  height: auto !important;
}

If you are caring about IE 7 support (I hope not, but I understand there are scenarios in which you must), use this to make sure the images survive the scale-down:

img { 
  -ms-interpolation-mode: bicubic; 
}

If you need to care about IE 6 (again…) this article has a JavaScript solution. Kind of a bummer loading extra JavaScript for a browser that is already much slower, but c’est la vie.

A shift in thinking

There was a time in which resizing images was quite the taboo. Browsers sucked at resizing images and bandwidth was being wasted. That attitude is all but gone now mostly because browsers are now pretty good at resizing images and having them look good. In fact, with “retina” displaying becoming a thing, serving too-large-for-container images is kinda good, because scaling them down makes them look all the sharper.

However the bandwidth thing is still a (big) issue. Which is what makes the responsive images thing such a hot issue right now. Point is: when thinking about flexible images, work in some thinking about responsive images too. You can read more up on the current solutions to that here.

Flexible Video

Flexible video is a little more complex than images. If you are using HTML5 <video> directly, the good news is that it holds its aspect ratio just like images do, so the same technique holds:

video {
  max-width: 100%;

  /* just in case, to force correct aspet ratio */
  height: auto !important;
}

However, I’m starting to think it’s a pretty bad idea to use HTML5 <video> directly. The required formats have been shifting around for years now and it’s not over yet. Add to that the fact that 1) hosting video is bandwidth intensive and expensive 2) streaming is another whole complicated beast 3) maintaining appropriate quality across formats and devices and available bandwidth is hard and 4) skinning consistant controls on the player is hard and … well … screw using HTML5 video directly.

Instead, I highly recommend using a video service like YouTube or Vimeo. When you embed videos from these services, you embed an <iframe>. What comes inside the iframe might be HTML5 video, but you don’t have to deal with it directly.

All that to say: <iframe>s have an aspect ratio problem.

The basic idea is that you create a video wrapper div with zero height and a top padding set in percentages. That percentage will actually be a percentage of the width, making it maintain aspect ratio. Then you absolutely position the video inside, which gives you that elusive ability to maintain aspect ratio. We’d be targeting the iframe for absolute position, as again, video doesn’t need this but iframes do. The basics:

.video-wrapper {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

Check out the article on that for more nuances and details about older browser support.

Advertisements

5 thoughts on “Rundown of Handling Flexible Media

  1. Hiya, I’m really glad I’ve found this information. Nowadays bloggers publish just about gossips and net and this is really annoying. A good blog with exciting content, this is what I need. Thank you for keeping this website, I’ll be visiting it. Do you do newsletters? Can’t find it.

  2. magnificent publish, very informative. I’m wondering why the other specialists of this sector don’t realize this. You must continue your writing. I’m sure, you have a huge readers’ base already!

  3. obviously like your website but you need to check the spelling on quite a few of your posts. Several of them are rife with spelling issues and I find it very bothersome to tell the truth nevertheless I will surely come back again.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s