Como hacer los vídeos de Youtube Responsive en Blogger - ROWRIGO BLOG

Como hacer los vídeos de Youtube Responsive en Blogger

jueves, 2 de mayo de 2019

Como hacer los vídeos de Youtube Responsive en Blogger

Hola a todos y a todas, en esta ocasión vamos aprender juntos como agregar vídeos de youtube en blogger, y  que a la vez sean responsivo en nuestro blog.

Ahora tenemos el vídeo de youtube que vamos a agregar en nuestro blog.
Pero antes tendremos que hacer unas modificaciones en nuestra plantilla blogger, para que los videos se adapten a la pantalla.

Nos encontramos en el panel de blogger, vamos a THEMES > EDITAR HTML, ya estando ahí se nos muestra el código de la plantilla de blogger.
Necesitamos encontrar en el código lo siguiente: ]]></b:skin>.  Justo encima de ese código agregaremos el siguiente código css.

.rowrigo-yt { position: relative; max-width: 100%; margin: 20px auto; padding-bottom: 56%; padding-top: 30px; overflow: hidden; height: auto; }
.rowrigo-yt iframe, .videoresp object, .videoresp embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Después de agregar el código css, guardamos los cambios.


El siguiente paso: después de tener ya el vídeo seleccionado en youtube, debajo del mismo le damos click donde dice: COMPARTIR > INCORPORAR, hay seleccionamos un código que nos da youtube similar a este.

<iframe width="560" height="315" src="https://www.youtube.com/embed/iW75F2-XezY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


Ahora encerramos lo anterior con el siguiente código. quedando de la siguiente manera.

<div class='rowrigo-yt'>
<iframe width="560" height="315" src="https://www.youtube.com/embed/iW75F2-XezY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>


Nos dirigimos a la entrada donde queremos publicar el vídeo en nuestro blog, nos pasamos a HTML, y pegamos el código ya modificado del vídeo de youtube.
Le damos PUBLICAR o ACTUALIZAR, ya sea el caso y listo vídeo youtube responsivo.

Espero que les ayude este truco, tanto como me ayudo ami.
Hasta la próxima..
bm

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.