Diseño de página web responsive - Vídeo

Usar la propiedad width

Si width Si se establece el atributo en 100%，el reproductor de video responderá y se ampliará o reducirá:

Ejemplo

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

Prueba personalmente

Tenga en cuenta que en el ejemplo anterior, el reproductor de video puede ampliar más de su tamaño original. En muchos casos, una mejor solución es usar la propiedad max-width.

Usar la propiedad max-width

Si se max-width Si se establece el atributo en 100%，el reproductor de video se reducirá proporcionalmente pero nunca se ampliará más de su tamaño original:

Ejemplo

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

Prueba personalmente

Agregar video a la página de ejemplo

Deseamos agregar un video a la página de ejemplo. El video se ajustará para ocupar siempre todo el espacio disponible:

Ejemplo

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

Prueba personalmente