Preserve the original video aspect ratio

Have you ever wanted to resize a video on the fly , scale it like an image? Using the internal aspect ratio for video, you can. This technique allows browsers to size video based on the width of the parent block. With internal proportions, the new width causes a new height calculation, which allows you to resize the video and makes it possible to scale it, just like the image. Example 1

Concept

The idea is to create a block with appropriate proportions (4: 3, 16: 9, etc.), and then place the video in this block, stretching it to the size of the block. It is very simple.
')
The meaning of padding is magic that creates internal proportions . Because we set the padding in percent based on the width of the parent block.

The CSS rules below illustrate how the styles of parents and children create a “magic wrapper” - a container that proportionally changes its size depending on the width of its parents. Example 2

.wrapper-with-intrinsic-ratio {
position: relative;
padding-bottom: 20%;
height: 0;
}

.element-to-stretch {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: teal;
}

* This source code was highlighted with Source Code Highlighter .

Let's look at the ads in each rule, starting with the .wrapper-with-intrinsic-ratio .

position: relative
By declaring position: relative all child elements will be positioned relative to this container.

padding-bottom: 20%
This announcement gives the block a specific format . Using 20% ​​for padding makes the block height equal to 20% of its width.

We specifically chose padding-bottom , not padding-top . This is because IE5 removes the “space” created with padding-top from the stream. In other words, using padding-top: 20% will create the layout that we want, but the block will behave as an absolutely positioned element, overlapping the following elements in the stream.

height: 0
Zero-height detection creates a “Layout” for this element, which makes it possible for IE5 and IE6 to make correct measurements inside the block. To learn more, visit " On having layout " ( transfer to Habré )

Now let's look at each declaration in the .element-to-stretch rule.

position: absolute
This frees the element from the height limits of its parent. Thus it can be located in the “padding area”.

top: 0
We set the top: 0 to place the block at the top of its parent.

left: 0
This ad has a block on the left side of its parent.

width: 100%
Ad width: 100% stretches the block to the full width of its container.

height: 100%
This ad stretches the block to the full height of its container.

background: teal
Set the color to see the location of the block.

Real action

Example 3 uses a YouTube video ( YouTube markup ), so we need to create a place for the control panel. The height of the panel is static: it is 25 pixels, regardless of the size of the video. We also change the value of padding to display the video in wide format (16: 9).

#containingBlock {
width: 50%;
}

.videoWrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}

object,
embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

* This source code was highlighted with Source Code Highlighter .

Let's take a look at our new selectors and announcements, let's start with the #containingBlock selector

width: 50%
This is just a video wrapper to demonstrate video resizing based on the width of the viewing block. In the previous example, the parent element was the body element.

Now let's look at a few ads in the .videoWrapper selector.

padding-bottom: 56.25%
To create a 16: 9 ratio, we must divide 9 by 16 (0.5625 or 56.25%).

padding-top: 25px
To avoid problems with violation of the block model (IE5 or IE6 in quirks mode), we use padding-top , not height to create space for the control panel.

Finally, we will use object, embed selector, because some browsers use object (for example, Safari), others embed (for example, Firefox).

Note : I’m currently using YouTube markup elements, but at the end of the article I’ll use valid markup and remove embed .

Internet Explorer fixes

To make it workable in Internet Explorer, just add additional wrappers. Example 4

#containingBlock {
width: 50%;
}

.videoWrapper {
position: relative;
padding-top: 25px;
padding-bottom: 56.25%;
height: 0;
}

* html .videoWrapper {
margin-bottom: 45px;
margin-bot\tom: 0;
}

.videoWrapper div,
.videoWrapper embed,
.videoWrapper object {
position:absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

* This source code was highlighted with Source Code Highlighter .

Let's take a look at our new selectors and ads, starting with the .videoWrapper selector.

height: 0
As you can see in the second example , IE5 and IE6 need a “layout”.

Now look at the * html .videoWrapper . The so-called “star hack”, This selector only works for IE6 and below, so only these versions will process the following declarations:

margin-bottom: 45px
As seen in the second example , the top padding creates some problems in IE5. Here we use an arbitrary value (which should work with different control panels) as compensation for “space” we lose the ability to use padding-top . This is necessary to prevent the overlay of the video on the following elements.

margin-bottom: 0
In CSS, splitting characters (backslash) of the property name acts as a filter, setting some value for IE6. IE6 "sees" this ad, while IE5 ignores it. If you prefer to use conditional comments rather than the above filters, you can move these declarations to the specific style the document header.

The .videoWrapper div selector is an additional wrapper that we need to do for Internet Explorer versions 5, 6 and 7.

Note : We use .videoWrapper div, .videoWrapper embed and .videoWrapper object {} instead of .videoWrapper * {} to prevent other content from being .videoWrapper * {} .

Cleaning up

To make the decision more flexible, we remove the padding-top ad from the previous rules and attach the yoke to the classes. Thus, we can easily style videos with different proportions and / or control panels. Example 5

#containingBlock {
width: 50%;
}

.videoWrapper {
position: relative;
height: 0;
}

* html .videoWrapper {
margin-bottom: 45px;
margin-bot\tom: 0;
}

.videoWrapper div,
.videoWrapper embed,
.videoWrapper object {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

.wideScreen {
padding-bottom: 56.25%;
}

.fourBYthree {
padding-bottom: 75%;
}

.chrome_25 {
padding-top: 25px;
}

.chrome_35 {
padding-top: 35px;
}

* This source code was highlighted with Source Code Highlighter .

Consider new classes starting from .wideScreen .

.wideScreen
We use this class to style div.videoWrapper in a 16: 9 ratio.

.fourBYthree
We use this class to style div.videoWrapper in a 4: 3 ratio.

.chrome_25
This class creates space for a control panel with a height of 25 pixels.

.chrome_35
This class creates space for a control panel with a height of 35 pixels.

Validation issue

When it comes to video, supporting web standards is not easy. First, most “suppliers” do not encode ampersands. Most often, they use the twice-cooked method (which uses non-standard embed elements ).

In order to make our markup compliant with the standards, we first replace all ampersands in the URL with “ & amp; ". Then, we implement the single object method . Unlike the method of nested objects , this technology provides the browser with a single object, as the code sample below shows. Example 6

< div id ="containingBlock" >
< div class ="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&hl=en&fs=1&showinfo=0" />
<![endif]-->
<!--[if !IE]>-->
< object type ="application/x-shockwave-flash" data ="http://www.youtube.com/v/mDRYnaajUcY&hl=en&fs=1&showinfo=0" width ="480" height ="295" >
<!--<![endif]-->
< param name ="quality" value ="high" />
< param name ="wmode" value ="opaque" />
< p >< a href ="http://www.adobe.com/go/getflashplayer" >< img alt ="Get Adobe Flash player" src ="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" /></ a ></ p >
</ object >
</ div >
</ div >
...
</ div >

* This source code was highlighted with Source Code Highlighter .

The method of one object facilitates code generation, since the “branching” is done in one place <object> , and not in two <object> and </object> .

Bonus

As we create an absolutely positioned element in the block, we can hide the content “behind” the video.
Note: This content is out of the object. This is not “alternative content” as such.
Example 7

< div id ="containingBlock" >
< div class ="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&hl=en&fs=1&showinfo=0" />
<![endif]-->
<!--[if !IE]>-->
< object type ="application/x-shockwave-flash" data ="http://www.youtube.com/v/mDRYnaajUcY&hl=en&fs=1&showinfo=0" width ="480" height ="295" >
<!--<![endif]-->
< param name ="quality" value ="high" />
< param name ="wmode" value ="opaque" />
< p >< a href ="http://www.adobe.com/go/getflashplayer" > < img alt ="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. It shows 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 >

* This source code was highlighted with Source Code Highlighter .

SWFObject script approach

To automate this approach, we can use the SWFObject script to add the desired styling to the .videoWrapper class, as well as add a wrapper if necessary for IE. Example 8
Note: in the last example, the width of the container block is specified in em .

To add code, we need to replace the following lines in SWFObject v 1.5 (approximately 117 lines)

n.innerHTML = this .getSWFHTML();

* This source code was highlighted with Source Code Highlighter .

On:

n.className += " videoWrapper" ;
if ( typeof document .documentElement.style.zoom != "undefined" ){
var wrapper4ie = document .createElement( "div" );
n.appendChild(wrapper4ie);
wrapper4ie.innerHTML = this .getSWFHTML();
} else {
n.innerHTML = this .getSWFHTML();
};

* This source code was highlighted with Source Code Highlighter .

This is all you need. Just a little CSS and you can scale the video on the fly.