Cómo hacer que un video HTML5 incrustado responda a la vista del navegador

es simple usando solo css3 sin ninguna línea de código JavaScript.

NOTA: esto se puede usar con cualquier incrustación e iframes, incluidos videos, flash, iframe y google maps.

Este código CSS hará que el video tenga el 100% del ancho de su contenedor y mantenga la altura preservando automáticamente la relación de aspecto entre ancho y alto.

/ ** Insertar video receptivo ** /

.video-container {
posición: relativa;
relleno inferior: 56.25%;
relleno superior: 30px;
altura: 0;
desbordamiento: oculto;
}

iframe de video-contenedor,
objeto de video-contenedor,
.video-container embed {
posición: absoluta;
arriba: 0;
izquierda: 0;
ancho: 100%;
altura: 100%;
}

Lo usé en el sitio web de la Universidad de Georgetown.
Puede encontrar un ejemplo de trabajo aquí:

Sobre la universidad de Georgetown

Yo uso CSS para lograr esto.

Utilice el método @media y especifique todos los anchos de pantalla que desea atender. Con cada ancho de pantalla, puede dimensionar con precisión su división de video.

Vea bootstrap resolución múltiple todos los diseños en línea de consulta de medios css para un diseño receptivo que incluye android iphone y web asp.net

Realmente creo el CSS dinámicamente usando php, en un ciclo while, donde especifico los anchos de pantalla mínimo y máximo, y especifico una cantidad incremental entre cada tamaño de pantalla. Esto abastece no solo para ventanas de navegador de ancho completo, sino también para ventanas reducidas.

Puede crear un seguimiento muy suave de esta manera, pero tenga cuidado de no usar un incremento innecesariamente pequeño o su CSS resultante será bastante grande y puede afectar los tiempos de carga de la página.

¡Espero que ayude!

Las consultas de medios CSS3 podrían ser suficientes si solo necesita adaptarse a una dimensión de puerto de vista. Sin embargo, si necesita adaptarse a una dimensión de contenedor principal (no necesariamente el objeto de ventana), puede escuchar el evento de cambio de tamaño de JavaScript para tener una respuesta dinámica. Así es como lo hacemos con Radiant Media Player. Intenta cambiar el tamaño de tu ventana y ver qué pasa con el jugador.

el reproductor bitdash ( http://www.dash-player.com ) puede hacer eso para dispositivos móviles, también tiene un generador de máscara totalmente personalizable http://www.dash-player.com/blog/2015/03/custom -player-skins-style-bitdash-as-you-like /