Diseño Web Adaptable - Video

Uso de la propiedad width

Si la propiedad width se establece en 100%, el reproductor de video se ajustará automáticamente según el tamaño de la pantalla:

Ejemplo

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

Pruébalo »

Nota: en el ejemplo anterior, el reproductor de video se ajusta automáticamente según el tamaño de la pantalla y puede ser más grande que su tamaño original. En la mayoría de los casos, podemos usar la propiedad max-width en su lugar.

Uso de la propiedad max-width

Si la propiedad max-width se establece en 100%, el reproductor de video se ajustará automáticamente según la pantalla, pero no excederá su tamaño original:

Ejemplo

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

Pruébalo »

Agregar video en una página web

Podemos agregar videos en una página web. En el siguiente ejemplo, el video se ajusta automáticamente según el tamaño del área div y ocupa todo el área div:

Ejemplo

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

Pruébalo »
Otras extensiones