HTML5ビデオを親要素のサイズに合わせる

I've got a

I would like the video element to also automatically resize so that it always remains contained within its background div; this sort-of-works if I set the video element's CSS height & width to 100%, so it's always the same size as its container. However, if the containing div's dimensions go below the video image's inherent videoWidth or videoHeight, then it starts to behave as though the CSS height/width properties refer to percentages of the video image's inherent dimensions, not the container div! E.g., if the CSS height is 100%, it scales normally except that it has a minimum size of the video's inherent height; if the CSS height is 50%, it scales normally but with a minimum size of 50% of the video's inherent height.

I can fix this, sort of, by using JavaScript to periodically reset the video element's height in pixels to be the computed height of the container, but this is really slow and choppy. Is there any way to fix this in CSS so that the video element will size properly?

4
追加された 編集された
ビュー: 1
多分フィドルがありますか?
追加された 著者 jQuerybeast,
@ LoganR.Kearsleyは私のために、私は密な瞬間を持っていて、これに間違いを覚えました - 私の謝罪。私は再オープンすることにノミネートしました。誰もが同意した理由は分かりません!私はまだそれが愚か者だと思っていますが、あなたが正しいです、それは私が選択したものの欺瞞ではありません。
追加された 著者 totallyNotLizards,
ビデオ画像は、アスペクト比を維持するためにビデオ要素の範囲内でレターボックス化されているはずです。ビデオ要素自体は大丈夫だと思われますが、通常は動作します。私はついにそれを働かせましたが、理由は私を逃げます。 jsfiddle.net/gliese1337/Djbvj/20 のフィドルを参照してください。ビデオの位置を「絶対」に設定すると、ビデオの位置が機能します。その行をCSSから削除すると、その行はわかりにくくなります。
追加された 著者 Logan R. Kearsley,
@jammypeachああ、どうですか?私はこれらの質問とポスターの質問に答えを約10分間は凝視していました。私は正直なところ、彼らが同じだと思う方法を理解できません。この問題は、ビデオポスター画像とは関係なく、ビデオのサイズに何かをマッチさせることはできません。これは、ビデオ画像ではなく、不思議な要素スケーリングではなく、ビデオに関する問題です。
追加された 著者 Logan R. Kearsley,
コンテナのアスペクト比がビデオコンテンツの内在アスペクト比と一致しないように見える(レンダリング時に、ビデオコンテンツの内在アスペクト比が常に保持される)
追加された 著者 ExpExc,

2 答え

これは古い質問ですが、私はCSSでレイアウトを達成するのに苦労しています。このレイアウトでは、通常、親要素の中にビデオが自動的にいくつかのボックスに収まるようにサイズが設定されています。

静的な配置で widthheight を使用するだけで、親子トポロジの特定の設定でのみ動作し、トポロジのスタイル設定にも大きく依存します。境界線を正しく計算する要素があっても、動画要素を内部に配置すると、親が許可したボックスを展開します。

いくつかの fieldset 要素を投げると、あなたはCSSとブラウザの特異性のウサギの穴にいます。

私が知ったことは、 position:absolute を使用して、ビデオ要素を位置決めコンテキストから取り除くのが最も簡単だったということです。これは、 width:100%height:100%を使用することで、視覚的にうまく動作しないことを意味するわけではありません。 (しかしそうではないだろう)。次に、 position:relative をvideo要素の適切な祖先要素に追加する必要があります。そうしないと、ビデオはドキュメントルートに対して絶対的に配置されます。

絶対配置は位置をリセットしないため、 leftright を省略すると、計算方法が切り替わります。代わりに両方のプロパティをゼロに設定すると、ビデオをオフセットの親の左上隅に揃えることができます。 max-widthmax-height は必要ありません。ユーザーがビデオ要素を制約することで苦労している多くのケースで、気にしない。

ビデオ要素またはそのオフセットの親の背景色を指定できます。そうすれば、レターボックス効果を得ることができます。たとえば、ビデオの両サイドに黒いバーがあります。

2
追加された

videodiv の中にあるため、ビデオの幅と高さを 100%に設定することで解決できます。これにより、ビデオは div 要素の100%を占めます。

マークアップの例:

<div id="video_container">
   

スタイルシート:

#video_container video {
    width: 100%;
    height: 100%;
}
1
追加された
ユーザエージェントがアスペクト比を保持するかどうかは、アスペクト比を維持しても、問題とはほとんど関係がありません。数学的に、あるいは他の次元を計算することは、最大の高さや幅を計算するのに自明です。アスペクト比が正しいようにします。これは、例えば、最新のワイドスクリーンテレビで4:3ディスプレイでレターボックス映画を見る方法、または4:3コンテンツでレターボックス映画を見る方法です。あなたは黒い棒を得る。 video では、そうでなければ background-color プロパティで達成可能です。
追加された 著者 amn,
私は結論は、ブラウザは常にビデオのアスペクト比を保持しているということです。
追加された 著者 mtyson,
それがまさに私が最初にやったことです。それはうまくいくはずの明らかなことです。しかし、それはしない(少なくとも3年前にはなかったが、これはもうこれ以上ないかもしれない。私が質問したように、「divのディメンションのサイズがビデオ画像の固有のvideoWidthまたはvideoHeightを下回ると、CSSのheight/widthプロパティがコンテナdivではなくビデオ画像の固有ディメンションのパーセンテージを参照しているように動作します! "それが私が解決する必要があった問題です。
追加された 著者 Logan R. Kearsley,