Keeping the original aspect ratio of the video

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

Concept

The idea is to create a block with the 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.

Meaning padding is magic that creates internal proportions . Because we set the indentation 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 declarations in each rule, starting with  .wrapper-with-intrinsic-ratio.

position: relative
Declaring position: relativeall children will be positioned relative to this container.

padding-bottom: 20%
This declaration gives the block a specific format . Using 20% ​​for paddingmakes 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 by using the stream padding-top. In other words, using padding-top: 20% the layout we want to be created, but the block will behave like an absolutely positioned element, overlapping the following elements in the stream.

height: 0
Determining the zero height creates this Layout element, which makes it possible for IE5 and IE6 to make the correct measurements inside the block. To learn more, visit " On having layout " ( translation on a habr )

Now let's consider each announcement in a rule .element-to-stretch.

position: absolute
This frees the element from the boundaries of the height of its parent. Thus, it can be located in the "padding area".

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

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

width: 100%
An ad width: 100%stretches a 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

In  Example 3,  using videos the YouTube ( the YouTube markup ), so we need to make room for a 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 paddingto display the video in a 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 ads, start with the selector. #containingBlock

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

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

padding-bottom: 56.25%
To create a 16: 9 ratio, we must divide 9 into 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, and not  heightto create a place for the control panel.

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

Note : At the moment I am using YouTube markup elements, but at the end of the article I will use valid markup and remove it embed.

Fixes for Internet Explorer

To make this work in Internet Explorer, just add extra 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 announcements, starting with the selector .videoWrapper.

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

Now let's look at the selector * html .videoWrapper. The so-called "star hack", This selector works only for IE6 and lower, therefore only these versions will process the following declarations:

margin-bottom: 45px
As you can see in the  second example , the top one paddingcreates some problems in IE5. Here we use an arbitrary value (which should work with various control panels) as a compensation for the "space" we lose the ability to use padding-top. This is to prevent the video from overlapping the following elements.

margin-bottom: 0
In CSS, the character separation (backslash) of the property name acts like 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 specific styledocument headers.

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

Note : We use .videoWrapper div, .videoWrapper embedand  .videoWrapper object {}instead .videoWrapper * {}to prevent styling other content.

Cleaning

To make the decision more flexible, we remove the declaration padding-topfrom the previous rules and bind the yoke to the classes. This way 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 at  .wideScreen.

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

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

.chrome_25
This class creates space for a control panel 25 pixels high.

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

Validation issue

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

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