Insertar un vídeo de Youtube en tu web de manera responsive (adaptable a los dispositivos)

Una de las cosas básicas que suele querer hacer todo el mundo que tiene una web es insertar un vídeo de Youtube. El problema es que cuando le das a “Compartir, Insertar”, Youtube (y Vimeo y muchos otros) te da un código en formato iframe, con un año y alto definidos. Normalmente de esta manera:

iframe src=”https://www.youtube.com/embed/XXXXXX” width=”560″ height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”>/iframe   (donde he quitado las etiquetas del iframe para que no me lo muestre en mi WordPress).

El problema de este código es que si lo pegamos en una web (que no tenga la plantilla ya preparada como vamos a explicar), se verá de ese tamaño en el ordenador, pero en móviles se saldrá de la pantalla. No es responsive. Afortunádamente hay una solución “sencilla” por CSS (hay que saber algo de CSS).

Solución: Lo primero que tenemos que hacer es rodear el código de Youtube en un div al que le pondremos una categoría que queramos:

<div class=”video-contenedor”> <iframe src=”http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0″ width=”800″ height=”450″ frameborder=”0″></iframe> </div>

Ahora en tu hoja de estilos vas a hacer los siguiente: vamos a poner el contenedor con un padding-bottom de entre un 50-60%, y los elementos incrustados (ifram, embed etc) de ese contenedor los vamos a forzar a un 100%.  Así estos elementos se ajustarán al dispositivo.

.video-contenedor 
{ position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-contenedor iframe, .video-contenedor object, .video-contenedor embed
{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Obviamente tendréis que ir probando y modificando el código para ajustarlo a lo que necesites. Os pongo otro ejemplo que hemos usado para poner 2 vídeos juntos. En las pantallas grandes se ven uno junto al otro, en pantallas de menos de 600px se muestran uno debajo del otro y centrados:

@media (max-width: 600px)
{
.video-contenedor {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 300px; overflow: hidden;
}

.video-contenedor iframe,
.video-contenedor object,
.video-contenedor embed {
position:relative;
top: 0;
left: 0;
width: 80%;
height: 80%;
padding-left:15%
}
}