Cuando empece con Responsive web design para un cliente me iba bien, hasta que me tope con uno de esos problemas que nos pasan muy a menudo, uno de ellos fueron los vídeos de Youtube que son totalmente estáticos, me refiero a que no se adaptaban a la web responsiva que estaba realizando, pero hay un pequeño truco para hacer que los videos de youtube y también los de vimeo sean totalmente responsive design y lo compartiré en un pequeño tutorial, empecemos!
Crearemos un contenedor para nuestro video y aplicaremos una clase para poder hacer responsive nuestro video.
Nota: Recuerden solo poner la dirección del video en «src» dentro de las etiquetas «iframe».
<section id="contenedor"> <div class="videoResponsive"> <iframe src="http://www.youtube.com/embed/7MlHOTh_m00"></iframe> </div> </section>
Ahora solo nos queda aplicar el CSS
#contenedor{
max-width:800px;/* Recuerden aplicar el ancho máximo del contenedor*/
margin:0 auto;
}
.videoResponsive{
margin:0 auto;
height:0px;
width:100%; /*tomará el tamaño al 100% del #contenedor*/
padding-top:56.25%; /*nos ayudara a la proporción del video*/
position:relative;
}
.videoResponsive iframe{
position:absolute;
height:100%;
width:100%;
top:0px;
left:0px;
}
Recuerden que este ejemplo también sirve para los videos de VIMEO, es el mismo proceso, solo hay que cambiar la Url del video de Youtube por la de VIMEO, dejo la demo y la descarga de los archivos (contraseña del .zip: antocas.com) para que puedan ver lo sencillo que es.
