ビデオの元のアスペクト比を維持する

ビデオをその場でサイズ変更したい、それを画像としてスケーリングしたいことがありますか？ ビデオの内部プロポーションを使用すると、できます。 この手法により、ブラウザは親ブロックの幅に基づいてビデオサイズを設定できます。 内部のプロポーションでは、新しい幅により高さの新しい計算が行われます。これにより、ビデオのサイズを変更し、画像のように拡大縮小することができます。 例1

コンセプト

適切な比率（4：3、16：9など）でブロックを作成し、このブロックにビデオを配置して、ブロックのサイズに合わせてストレッチするという考え方です。 とても簡単です。

paddingの意味は、 内部のプロポーションを作成する魔法です。 親ブロックの幅に基づいてパーセントでインデントを設定するためです。

以下のCSSルールは、親と子のスタイルが「魔法のラッパー」を作成する方法を示しています。これは、親の幅に応じて比例的にサイズ変更されるコンテナです。 例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 .

.wrapper-with-intrinsic-ratioで始まる各ルールの宣言を見てみましょう。

position: relative
position: relative宣言することによりposition: relativeすべての子はこのコンテナに対して相対的に配置されます。

padding-bottom: 20%
この宣言により、ブロックに特定の形式が与えられます 。 padding 20％を使用すると、ブロックの高さが幅の20％に等しくなります。

具体的には、 padding-topではなくpadding-top padding-bottom選択しました。 これは、IE5がpadding-topによって作成された「スペース」をストリームから削除するためです。 つまり、 padding-top: 20%と、必要なレイアウトが作成されますが、ブロックは絶対位置要素として動作し、ストリーム内の次の要素と重なります。

height: 0
高さゼロを決定すると、この要素の「レイアウト」が作成され、IE5およびIE6がブロック内で正しい測定を行うことができます。 詳細については、「 レイアウトについて 」を参照してください（ habrでの翻訳 ）

ここで、 .element-to-stretchルールの各宣言を見てみましょう。

position: absolute
これにより、親の高さの境界から要素が解放されます。 したがって、「パディングエリア」に配置できます。

top: 0
top: 0を設定して、親の最上部にブロックを配置します。

left: 0
この広告は、親の左側にブロックを配置します。

width: 100%
幅宣言width: 100%は、ブロックをコンテナの幅いっぱいまで引き伸ばします。

height: 100%
この広告は、ブロックをコンテナの高さまで引き伸ばします。

background: teal
ブロックの場所が見えるように色を設定します。

リアルアクション

例3ではYouTubeビデオ（ YouTubeマークアップ ）を使用しているため、コントロールパネル用の場所を作成する必要があります。 パネルの高さは静的です。ビデオのサイズに関係なく、25ピクセルです。 また、 paddingの値を変更して、ビデオをワイド形式（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 .

新しいセレクターと宣言を見てみましょう。 #containingBlockセレクターから始めましょう

width: 50%
これは、表示ブロックの幅に基づいてビデオのサイズを変更することを示すための単なるビデオラッパーです。 前の例では、親ブロックはbody要素でした。

次に、 .videoWrapperセレクターのいくつかの広告を見てみましょう。

padding-bottom: 56.25%
16：9の比率を作成するには、9を16に分割する必要があります（0.5625または56.25％）。

padding-top: 25px
ブロックモデルの違反 （互換モードのIE5またはIE6）に関する問題を回避するために、コントロールパネルの場所を作成するために、 heightではなくpadding-topを使用しpadding-top 。

最後に、 object, embedセレクタを使用しobject, embed一部のブラウザはobject （例：Safari）を使用し、他のブラウザはembed （例：Firefox）であるためです。

注 ：現在YouTubeマークアップ要素を使用していますが、記事の最後で有効なマークアップを使用してembedを削除します。

Internet Explorerの修正

Internet Explorerでこれを機能させるには、ラッパーを追加するだけです。 例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 .

.videoWrapperセレクターから始めて、新しいセレクターと宣言を見てみましょう。

height: 0
2番目の例でわかるように 、IE5とIE6には「レイアウト」が必要です。

では、 * html .videoWrapper見てみましょう。 いわゆる「スターハック」は、このセレクターがIE6以下でのみ機能するため、これらのバージョンのみが次の宣言を処理します。

margin-bottom: 45px
2番目の例が示すように、上部のpaddingはIE5でいくつかの問題を引き起こします。 ここでは、 padding-topを使用する機能を失う「スペース」の補償として、任意の値（さまざまなコントロールパネルで機能するはずです）を使用しpadding-top 。 これは、ビデオが次の要素と重ならないようにするためです。

margin-bottom: 0
CSSでは、プロパティ名の文字区切り（バックスラッシュ）はフィルターのように機能し、IE6の値を設定します。 IE6はこの広告を「表示」しますが、IE5はそれを無視します。 上記のフィルターではなく条件付きコメントを使用する場合は、これらの宣言をドキュメントタイトルの特定のstyle移動できます。

.videoWrapper divセレクターは、Internet Explorerバージョン5、6、および7で行う必要がある追加のラッパーです。

注 ： .videoWrapper * {}代わりに、 .videoWrapper div, .videoWrapper embed 、および.videoWrapper object {}を使用して、他のコンテンツのスタイル設定を防ぎます。

クリーニング

ソリューションの柔軟性を高めるために、前の規則からpadding-top宣言を削除し、ヨークをクラスにバインドします。 このようにして、さまざまなプロポーションやコントロールパネルを使用してビデオを簡単にスタイル設定できます。 例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 .

.wideScreen始まる新しいクラスを検討して.wideScreen 。

.wideScreen
このクラスを使用して、div.videoWrapperを16：9の比率でスタイルします。

.fourBYthree
このクラスを使用して、div.videoWrapperを4：3の比率でスタイルします。

.chrome_25
このクラスは、高さ25ピクセルのコントロールパネル用のスペースを作成します。

.chrome_35
このクラスは、コントロールパネルの高さが35ピクセルのスペースを作成します。

検証の問題

ビデオに関しては、Web標準のサポートは簡単ではありません。 まず、ほとんどの「プロバイダー」はアンパサンドをコーディングしません。 ほとんどの場合、 2回調理された方法 （ 非標準の embed 要素を使用）を使用します。

マークアップを標準に準拠させるために、最初にURLのすべてのアンパサンドを「 & amp; 「。 次に、 単一オブジェクトmethodを実装します 。 ネストされたオブジェクトメソッドとは異なり、このテクノロジは、以下のコード例が示すように、ブラウザに単一のオブジェクトを提供します。 実施例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 .

「分岐」は2つの<object>と</object>ではなく、1つの場所<object>で行われるため、 単一オブジェクトメソッドはコード生成を容易にします。

ボーナス

ブロック内に絶対位置の要素を作成するため、コンテンツをビデオの「背後」に隠すことができます。
注：このコンテンツは施設外にあります。 これは「代替コンテンツ」ではありません。
実施例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スクリプトアプローチ

このアプローチを自動化するには、SWFObjectスクリプトを使用して.videoWrapperクラスに目的のスタイルを追加し、IEに必要な場合はラッパーを追加します。 例8
注：最後の例では、コンテナブロックの幅がemで示されています。

コードを追加するには、SWFObject v 1.5の次の行（約117行）を置き換える必要があります。

n.innerHTML = this .getSWFHTML();

* This source code was highlighted with Source Code Highlighter .

オン：

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 .

必要なのはそれだけです。 ほんの少しのCSSで、オンザフライでビデオをスケーリングできます。