In order to make responsive designs successfully adapt to any screen size, you need to properly scale not just headlines and text elements, but images and other media. We've already covered a number of solutions for images, but what about other elements like video?
Scaling video when you can control the embed code is pretty easy, the same max-width tricks that work on images will work on video. The tricky problems with scaling video come when you start trying to embed movies from other websites.
YouTube and most other video hosting sites typically include a fixed width and height in pixels as part of the embed code. That's fine for older designs, but it doesn't scale in a responsive layout.
Swedish web developer Anders Andersen recently tackled the problem of responsive embeds and came up with a solution that works with both YouTube and Vimeo movies. Andersen's solution is to wrap any embed code, whether it's an actual embed tag or an iframe, with an extra div and then scale that div. Naturally you'll need to strip any fixed dimensions out of the YouTube or other embed code for this to work.
For the full details and the CSS that makes it work, be sure to read Andersen's whole post.
The core of Andersen's method lies in the CSS, which uses this handy trick to preserve the intrinsic ratio of the video even as its container element scales down.
Andersen has tested this technique with YouTube, Vimeo and SlideShare embeds, though it may work with others as well.
Between stripping out any video dimensions and adding a wrapper div, Andersen's responsive embed trick is a little bit of work. It's probably not practical for a site with a lot of video, or a site where non-technical users will be posting video. However, if you've got a simple site that's 99 percent responsive, but you've been looking for a way to handle video, this fits the bill.
Be sure to check out Andersen's follow-up post where he does some device testing. The results are generally encouraging, with most modern phones handling the code just fine. The only real problem device seems to be the new Nokia Lumia 800 (running Windows Phone 7) which fails to play the YouTube embeds.
