Progettazione della pagina web responsive - Video

Utilizzo dell'attributo width

Se width L'attributo impostato al 100%, il riproduttore video risponde e si ridimensiona:

Esempio

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

Prova da solo

Notare che nel esempio sopra, il riproduttore video può essere ingrandito oltre la sua dimensione originale. In molti casi, una soluzione migliore è utilizzare l'attributo max-width.

Utilizzo dell'attributo max-width

Se si imposta max-width L'attributo impostato al 100%, il riproduttore video viene ridotto proporzionalmente ma non viene ingrandito oltre la sua dimensione originale:

Esempio

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

Prova da solo

Aggiungere un video alla pagina di esempio

Speriamo di aggiungere un video alla pagina di esempio. Il video verrà ridimensionato in modo che occupi sempre tutto lo spazio disponibile:

Esempio

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

Prova da solo