La inserción de video en un sitio responsive puede traernos algunos problemas, específivamente por que los videos, ya sean desde Youtube, Vimeo, etc. entregan un código de incrustación en alguno de los siguientes formatos iframe, object, embed, como por ejemplo:
<iframe width="560" height="315" src="https://blog.ida.cl/wp-content/uploads/sites/5/2012/05/iRoenMHx6LQ" frameborder="0" allowfullscreen> </iframe>
El iframe, al traer contenido desde un sitio externo, no se nos permite modificar a través de estilos CSS (aunque existen formas bastante complejas, que veremos en otro post). Por lo mismo es que el siguiente truco es bastante útil para que los videos sean responsivos, y solo a través de CSS.
Primero debemos contener el video, por ejemplo, en un div:
<div class="video-wrapper"> <iframe width="560" height="315" src="https://blog.ida.cl/wp-content/uploads/sites/5/2012/05/iRoenMHx6LQ" frameborder="0" allowfullscreen> </iframe> </div>
Y luego los atributos CSS para ese div contenedor:
.video-wrapper{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
display:block;
}
Y por último los atributos para los iframes, objects o embed que permitirán que abarquen todo el ancho del contenedor padre:
video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Actualización
Desde Revista Capital nos contaron sobre Embed responsively. Se trata de una herramienta que a partir de un URL genera código responsive para insertar videos en sitios web.