Videos elásticos para sitios responsive

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://cdn.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://cdn.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.