Background video

Question

Witam. Uczę się tworzyć background video i natrafiłem na kilka postów na codepenie w których w video oprócz min-width:100% oraz min-height:100%, daję się również height:auto oraz width:auto. Więc mam pytanie co ma to na celu? Po usunięciu tego nic się nie zmienia. Przykładowy link Dziękuję za wszelką pomoc!

Answer 1

jakbyś gdzieś wcześniej ustawił jakieś parametry width i height do tego video to byś zauważył że coś jest nie tak :P

jak ustawiasz sobie auto to tak jakbyś resetował tamte poprzednie ustawienia :P

https://codepen.io/Tnifey/pen/qoMNpq?editors=0110

Comments

Lecz jeśli ustawię width: 100%; height: auto; usuwając wartości min-height i min-width daje mi to ten sam efekt, więc dlaczego ustawia się 4 własciwości zamiast tych dwóch?

---

z video jest taki problem że kontener video a sam obraz mogą mieć różne rozmiary :P

lepiej użyj obiect-fit: cover w ten sposób nie ustawiasz min-width i min-height :P

https://codepen.io/Tnifey/pen/gedMEd?editors=0100

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

https://caniuse.com/#search=object-fit

---

Dziękuję ci bardzo! Pozdrawiam.

---

dodatkowo nie musisz robić translateX(-50%) translateY(-50%)

poprostu:

video {
  position: fixed;
  top: 0; /* zero od góry */
  left: 0; /* zero od lewej */
  width: 100%;
  height: 100%;
  z-index: -100;

  object-fit: cover;
}