Video etiketi ne olursa olsun oranları% 100 div doldurmak için

Ben bir div% 100 doldurma için bir video etiketine sahip meşgul ediyorum:Video etiketi ne olursa olsun oranları% 100 div doldurmak için

a) oranları (aksi takdirde biz kullanmaya gerek tutmak gerekmez taşma: yok); Tüm arka planı değil, bir div doldurun; Sorumlu olmak için bir artı olurdu. Şimdi, pencereyi çapraz olarak yeniden boyutlandırdığınız sürece. Yüksekliği korumak ve yeniden boyutlandırmak, videoyu yatay olarak keser.

Yüzlerce alternatif olmasa bile düzinelerce denedim ve hepsi ilk video oranını korudu.

o keman daha iyi bir tarayıcı belki ekran, küçük belki de .... fidlle çalışır ...

<body> 
<div class="wrapper"> 
    <div class="header"> 
    ..... 
    </div> 
    <div class="out-video"> 
     <video autoplay loop poster="mel.jpg" id="bgvid" width="100%" height="100%"> 
      <source src="http://www.mysite.braaasil.com/video/mel.webm" type="video/webm"> 
      <source src="http://www.mysite.braaasil.com/video/mel.mp4" type="video/mp4"> 
     </video> 
    </div> 
</div>

denemek gibi site here ama çözümler, değişecek ... Sağ ve sol bir kenar çubuğu boş. Videonun tüm genişliği doldurmasını istiyorum. Div'i kapladığında, yükseklik değişimi ve video tam olarak gösterilmez. Arka plan boyutu% 100% 100 gibi bir şey istiyorum, bu görüntüler div'in sonuna kadar uzanıyor, ancak video için çalışmıyor.

Önceden herhangi bir öneriniz için teşekkür ederiz.

PS. Android ailesi video oynatmıyor gibi görünüyor!

kaynak

2014-04-04 user2060451

webm versiyonu eksik gibi görünüyor. Belki de sunucunuzda bu format için izinler ayarlamanız gerekir. Gereksinimleriniz tam olarak belli değil. –

web sürümü çalışmıyor mu? – user2060451

Bağlantı, bir 404 verir. Bunun nedeni, sunucunun .htaccess dosyanızdaki bir satırla kolayca düzeltebileceğiniz dosya türüne izin vermeyecek olması olabilir. –

this one gibi bir çözümü kullanabilirsiniz. Oran değişmez, ancak videonun doğru bölümünü kaybedebilirsiniz.

video#bgvid { 
    position: absolute; 
    z-index: 0; 
    background: url(mel.jpg) no-repeat; 
    background-size: 100% 100%; 
    top: 0px; 
    left: 0px; /* fixed to left. Replace it by right if you want.*/ 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
}

Video sol üst köşeye giderilecek. Bunu geliştirmek istiyorsanız, biraz JavaScript'e ihtiyacınız olacağını düşünüyorum.

Düzenleme:

Sadece senin ihtiyacını sığabilecek JQuery ile bir çözüm bulmak: simulate background-size:cover on <video> or <img>

Demo

kaynak

2014-04-04 22:48:30 aloisdg

Teşekkürler. Jquery çözümü, başlığı viewport'a ekleyecek gibi görünüyor, bu yüzden kabul edilebilir bir kaydırma çubuğu olacak. Kaydırma çubuğu, tam alt div (genişlik:% 100 ve yükseklik: viewport'un% 85'i) olmaya çalışıyordum. Sorun şu ki, video görüntü gibi elastik değil ... üzerine yazıyor… önemli .... ve diğer her şey. boş video görüntülerini, kaydırma çubuğuna sahip tam div veya taşmayı gizleme ile kolayca izleyebilirsiniz. Videonun div'i doldurmak için oranlarını değiştirin ve tam bir videonun bir şey olmasını sağlayın. – user2060451

Bu benim için çalıştı, teşekkürler! –

Video etiketi ne olursa olsun oranları% 100 div doldurmak için

cevap

İlgili konular