Responsive videos

Did you ever want to resize a video on the fly, scaling it as you would an image? Using intrinsic ratios for video, you can. This technique allows browsers to determine video dimensions based on the width of their containing block.

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

Let’s review the declarations in each rule, starting with .wrapper-with-intrinsic-ratio.

position:relative

By declaring position:relative all child elements will position themselves in relation to this container.

padding-bottom:20%

This declaration gives the box a specific format. Using 20% for padding makes the height of the box equal to 20% of its width.

We specifically chose to use padding-bottom rather than padding-top. This is because IE5 removes the “space” created via padding-top from the flow. In other words, using padding-top:20% would create the layout we want, but the box would act like an absolutely positioned element, overlapping the next elements in the flow.

height:0

Specifying a height of 0 gives this element “layout” so that IE5 and IE6 will dimension the inner box properly. To learn more, visit “On having layout.”

(Note: because IE5 and IE6 treat width as a minimum width, you should not use width:100% as a layout trigger. This causes the box to expand to fill its container rather than respect the width we set for that container.)

example three uses a YouTube video (with YouTube markup), so we need to make room for the chrome. Note that the height of the chrome is static: it is 25 pixels tall, regardless of the dimensions of the video. We also change the padding value to display the video in a widescreen format (16:9).

Now, let’s look at our * html .videoWrapper selector. Called the “star html hack,” this selector makes sense only for IE6 and under, as only these versions parse the following declarations:

margin-bottom:45px

As seen in example two, top padding creates some issue in IE5. Here, we use an arbitrary value (that should work with various chromes) to compensate for the “space” we lose by using padding-top. This is to prevent the video from overlapping subsequent elements.

margin-bottom:0

The CSS escape notation (backslash character) within the property name acts as a filter to set a different value for IE6. IE6 “sees” this declaration, while IE5 ignores it. If you prefer using conditional comments rather than the filters above, feel free to move these declarations to IE specific style sheets or style elements in the head of the document.

Finally, the .videoWrapper div selector is the extra wrapper we need to make things work in Internet Explorer versions 5, 6, and 7.

To make this solution more versatile, we remove padding-top declarations from the previous rules and associate them with classes. This way, we can easily style videos with different ratios and/or chromes. See example five

When it comes to video, supporting web standards is not easy. First, most vendors do not encode ampersands. Most often, they rely on the twice-cooked method (using the non-standardembed element).

To make our markup standards-compliant, we first replace all ampersands in URLs with “&amp;” Then, we implement a single-object method. Unlike the nested-objects method, this technique feeds user agents a single object, as the sample code shows below. See example six

Because we have an absolutely positioned element within the box, we can hide content “behind” the video. Note: this content is outside the object. It is not “alternative content” per se. See example seven

<divid="containingBlock"><divclass="videoWrapper"><div><!--[if IE]> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="295"> <param name="movie" value="http://www.youtube.com/v/ mDRYnaajUcY&amp;hl=en&amp;fs=1&amp;showinfo=0" /> <![endif]--><!--[if !IE]>--><objecttype="application/x-shockwave-flash"data="http://www. youtube.com/v/mDRYnaajUcY&amp;hl=en&amp;fs=1&amp;showinfo=0"width="480"height="295"><!--<![endif]--><paramname="quality"value="high"/><paramname="wmode"value="opaque"/><p><ahref="http://www.adobe.com/go/getflashplayer"><imgalt="Get Adobe Flash player"src="http://www.adobe.com/images/shared/ download_buttons/get_flash_player.gif"></a></p></object></div><p>The following is the description of the video embeded in this document.</p><p>This short clip is about YouTube widescreen formatting. Itshows the two main formats (16:9, 4:3) and also explains the best way to create a Flash movie according to the new widescreen format.</p></div>
...
</div>

To automate this method, we can use the SWFObject script to add the .videoWrapper class we need for styling and also to plug in the wrapper we need for IE. See example height (Note: in this last example, the width of the containing block is set in em.)

To add the code we need, we replace the following line in SFWObject v1.5 (around line 117):

And that’s all there is to it. With just a little CSS and your new know-how, you too can resize and scale videos on the fly. See what you can do with the intrinsic ratio technique and share your results in the discussion.