Crear plantilla para videos que se ajusten a la pantalla del movil

Para los que comienzan con eso de elaborar blogs y subir videos este tema les sera de mucha ayuda puesto que a mi me dio mucho dolor de cabeza cuando empezaba, subia videos y en los moviles se veian muy grandes y por mas que le modificaba el codigo no podia hacer que el video se ajustara al tamaño del movil.

Bueno en este tema te traigo justamente como solucionar eso y no es nada dificil lo unico que tienes que hacer es copiar el siguiente codigo e insertarlo en la seccion  de abajo y pegarlo en la plantilla de nuestro blog, pero donde editamos el html, buscamos la seccion de css o de estilos.

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

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

Lo siguiente que haremos será copiar el código para embeber el vídeo, igual que hemos hecho otras veces, aunque para indicarle que el div será responsive, hemos de editar nuestro blog en formato texto (no visual) para añadir el HTML necesario, en este caso un div que contendrá el vídeo:

<div class="contenedor-video">
<iframe src="//www.youtube.com/embed/y0kBy-wf5qo?list=UUt4oJu2ItngyTNBwPNmJDfA" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>
</div>

Y con esto ya está listo, la próxima vez que queramos hacer que un vídeo sea adaptable, sólo tendréis que añadir “contenedor-video” para que funcione.