HTML5 videoyu üst öğe boyutuna sığdırma

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
Belki bir keman var mı?
katma yazar jQuerybeast, kaynak
@ LoganR.Kearsley, benim açımdan, yoğun bir an yaşadım ve yanlış bir şekilde yanlış yönlendirdim - özür dilerim. Yeniden açmaya aday gösterdim. Neden herkesin kabul ettiğinden emin değilim! Hala bir dupe olduğunu düşünüyorum ama haklısın, seçtiğim dupe değil.
katma yazar totallyNotLizards, kaynak
Video görüntüsünün, en boy oranını korumak için video öğesinin sınırları içine posta kutusu gönderilmesi gerekir; Video öğesinin kendisinin istediğiniz gibi boyutlandırılması gerekiyor ve bu genellikle işe yarıyor. Sonunda işe almak için yaptım, ama nedeni benden kaçar; jsfiddle.net/gliese1337/Djbvj/20 adresindeki keman bölümüne bakın. Video konumunu "mutlak" olarak ayarlarsanız, çalışır. Bu satırı CSS'den silerseniz, anlaşılmaz şekilde davranır.
katma yazar Logan R. Kearsley, kaynak
@jammypeach Uh, nasıl? Bu soruların her ikisine de bakıyorum ve poster sorusu üzerine verilen cevaplar, yaklaşık 10 dakikadır ve dürüstçe, onların nasıl aynı olduğunu düşündüğünüzü anlayamıyorum. Bu sorunun video poster görüntüleriyle veya bir videonun boyutuyla eşleştirilmesiyle ilgisi yoktur. Bu video ile değil, video görüntüsüyle değil, tuhaf bir şekilde ölçeklendirilen bir sorun.
katma yazar Logan R. Kearsley, kaynak
Görünüşe göre, içeriğin en boy oranı video içeriğinin en boy oranıyla eşleşmiyor (Görüntülerken, video içeriğinin en boy oranı her zaman korunuyor)
katma yazar ExpExc, kaynak

2 cevap

Bunun daha eski bir soru olduğunun farkındayım, ancak bir videonun otomatik olarak bazı öğelere, özellikle de ana öğeye sığacak şekilde boyutlandırıldığı CSS ile bir düzen oluşturmakla uğraşıyorum.

Sadece width ve height 'in statik konumlandırma ile kullanılması yalnızca ebeveyn-çocuk topolojilerinin belirli bir yapılandırmasında çalışır ve aynı zamanda topolojinin nasıl şekillendiğine de bağlıdır. Sınırlarını düzgün bir şekilde hesaplamak için bir öğeye sahip olsanız bile, içine bir video oynatıcı öğesi yerleştirdikten sonra, beklediğiniz en mantıklı davranış olsa bile ebeveynlerin izin verdiği kutuyu genişletir .

Bazı fieldset öğelerini atın; siz de CSS ve tarayıcı özelliklerinin tavşan deliğindesiniz.

Bulduğum şey, position: absolute kullanarak video öğesini konumlandırma bağlamından çıkarmanın en kolay yoludur. Görsel olarak iyi davranış göstermeyeceği anlamına gelmez - width: 100% ve height: 100% kullanarak etkin bir şekilde kendisini gerektiği gibi kısıtlar. (ama olmaz). Daha sonra, video öğesinin uygun ata öğesine position: relatif eklemeniz gerekir, aksi takdirde video kesinlikle istediğiniz şekilde olmayan belge köküne göre konumlandırılır.

left ve right atlanması, mutlak konumlandırma konumu sıfırlamadığından çalışır, yalnızca hesaplama yöntemini değiştirir. Alternatif olarak her iki özelliği de sıfır olarak ayarlayabilirsiniz, videonuzu sonradan üst sol köşeye ofset üst hizaya getirirsiniz. maksimum genişlik ve maksimum yükseklik gerekli değil - İnsanların video öğelerini kısıtlamakla mücadele ettiği birçok durumda bunların atıldığını gördüm - yapma ' Rahatsız etmeyin.

Video öğesi veya ofset ailesi için arka plan rengini belirleyebilirsiniz. Bu şekilde, mektup boks efekti elde edersiniz - örneğin, videonun kenarlarındaki siyah çubuklar.

2
katma

videonuz bir div içinde olduğundan, videonun hem genişliğini hem de yüksekliğini % 100 olarak ayarlayarak çözülebilir. Bu, videoyu div öğesinin% 100'ünü kaplar.

Biçimlendirme örneği:

<div id="video_container">
   

Stil:

#video_container video {
    width: 100%;
    height: 100%;
}
1
katma
Kullanıcı aracısının en boy oranını koruyup korumadığı sorunla çok az ilgisi vardır - en boy oranını koruyarak bile, hangi sınırlamanın daha uygulanabilir olduğuna bağlı olarak maksimum yüksekliği veya genişliği hesaplamak ve diğer boyutu hesaplamak matematiksel ve aksi durumda önemsizdir bu yüzden en boy oranı doğru. Mesela posta kutusundaki filmleri 4: 3 ekranda ya da örneğin modern geniş ekran televizyonlarda 4: 3 içeriği olan tam tersi şekilde izlersiniz. Siyah çubuklar alıyorsun. video ile bu, arka plan rengi özelliğiyle gerçekleştirilebilir.
katma yazar amn, kaynak
Alt satırda, tarayıcı her zaman videonun en boy oranını koruduğunu düşünüyorum.
katma yazar mtyson, kaynak
Tam olarak ilk yaptığım şey buydu. Çalışması gereken açık bir şey. Ancak yapmaz (veya en azından 3 yıl önce yapılmadı; bu, daha sonra birkaç tarayıcı sürümü için geçerli olmayabilir). Soruda söylediğim gibi: "eğer içeren div boyutları video görüntüsünün doğal videoWidth veya videoHeight değerinin altına düşerse, CSS yükseklik/genişlik özellikleri video görüntüsünün doğal boyutlarının yüzdelerini ifade eder, konteyner divinin yüzdesini gösterir. !" Çözmem gereken sorun buydu.
katma yazar Logan R. Kearsley, kaynak