Web Design Responsiv - Videoclipuri. Utilizarea proprietății width. Utilizarea proprietății max-width. Adăugați un videoclip la pagina web.

Web Design Responsiv - Videoclipuri

Utilizarea proprietății width

Dacă proprietatea lățimii (width) este setată la 100%, playerul video va răspunde și va scala în sus și în jos:

video {
  width: 100%;
  height: auto;
}

Rețineți că, playerul video poate fi amplificat pentru a fi mai mare decât dimensiunea inițială. O soluție mai bună, în multe cazuri, va fi utilizarea în schimb a proprietății cu lățimea maximă (max-width).

Utilizarea proprietății lățime maximă (max-width)

Dacă proprietatea lățime maximă (max-width) este setată la 100%, playerul video va scădea în jos dacă trebuie, dar niciodată nu va fi mai mare decât dimensiunea inițială:

Exemplu:

video {
  max-width: 100%;
  height: auto;
}

Adăugați un videoclip la pagina web de exemplu

Vrem să adăugăm un videoclip în pagina noastră web de exemplu. Videoclipul va fi redimensionat pentru a ocupa întotdeauna tot spațiul disponibil:

Exemplu:

video {
  width: 100%;
  height: auto;
}