Diseño Web Responsivo - Vídeos
Usando la propiedad de ancho
Si la width
propiedad se establece en 100 %, el reproductor de video responderá y se escalará hacia arriba y hacia abajo:
Ejemplo
video {
width: 100%;
height: auto;
}
Tenga en cuenta que en el ejemplo anterior, el reproductor de video se puede ampliar para que sea más grande que su tamaño original. Una mejor solución, en muchos casos, será utilizar la
max-width
propiedad en su lugar.
Uso de la propiedad max-width
Si la max-width
propiedad se establece en 100 %, el reproductor de video se reducirá si es necesario, pero nunca se escalará más grande que su tamaño original:
Ejemplo
video {
max-width: 100%;
height: auto;
}
Agregar un video a la página web de ejemplo
Queremos agregar un video en nuestra página web de ejemplo. El vídeo se redimensionará para ocupar siempre todo el espacio disponible:
Ejemplo
video {
width: 100%;
height: auto;
}