Nasıl arka plan boyutu işlevselliği: <video> <img> gibi bir html öğesi kapağında taklit edebilir miyim?

İt gibi çalışmak istiyorum background-size: cover; background-position: center center;.

Kullanarak arka plan kapak resimleri için ince ve genişlik 100%. Bu <video> için uygun değildir ve bu cevaplar çok karışık. Tam genişlik video bir arka plan yapmak için jQuery veya JavaScript gerekmez.

Unutmayın, benim kod değil, kapak bir arka plan tamamen bir video gibi karşılar, ama bunun yerine yapacağınız video gibi büyük ihtiyacı olduğu için en boy oranını korumak ve hala kapak tüm arka plan. Herhangi bir aşırı video video çapa nereye bağlı, hangi sayfa kenarına, kanamaya başlar.

Cevap oldukça basit.

Sadece kullanın Bu HTML5 video kod, veya bu satırlar boyunca bir şey:

<video id="video-background" preload autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Sonra Uygula bu css:

#video-background { 
  position: absolute;
  bottom: 50%; 
  right: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto;
  z-index: -1000; 
  overflow: hidden;
}

Min-height ve min-genişlik videoyu normal bir çözünürlükte genellikle normal bir tarayıcı En Boy oranı olan video, en boy oranını korumak için izin verecektir. Herhangi bir fazla video sayfanın yan yaralamış olur.

Benim web sitesinden daha fazla bilgi edinin: 8**!