2012-02-20 11 views
1

cssでは、背景画像にはcoverのsizeプロパティを使用できます。これは、画像が常にスペースを埋めるのに十分に正確に大きくなることを意味します。HTML5動画要素を対象に設定しますか?

HTML5ビデオ要素で同じサイジングプリンシパルを作成したいと考えています。誰かがこれを行う方法の例を持っていますか?

トリックは、幅と高さの比率を計算しています。これは、ビデオと比較して、あなたが充填しているボックス/ウィンドウの高さの比率です。

ありがとうございます!

答えて

1

あなたはjQueryのを少し気にしない場合、あなたはこれを見てはhttp://syddev.com/jquery.videoBG/

をplugin-持っている場合があります。また、HTML5のビデオを使用して上の偉大なスーパーの包括的な記事ではHTML5シリーズへのダイブです - http://diveintohtml5.info/video.html

+0

プラグインを使用して比率を維持することができます。私はおそらくちょうどこれの自分のバージョンをロールバックします。 – fancy

0

VideoBGはいいですが、要素を固定位置に設定することで機能します。たとえば、ビデオが「スクロールページ」内にあるようなエフェクトを実装する場合などに使用できます。

0

CSS変換プロパティは要素サイズで計算されるので、ビデオ出力の解像度に関係なく中央に配置することができます。

あなたは、イベントのサイズを変更するためには反応しない分、幅と高さの分-

position:absolute; 
top: 50%;   
left: 50%;   
-webkit-transform: translate(-50%,-50%); 
-moz-transform: translate(-50%,-50%); 

Fiddle here

関連する問題