PONER UN VIDEO COMO GADGET EN BLOGGER
Debido a la gran necesidad que tenemos de aumentar la cantidad de minutos en nuestros videos, es vital utilizar todos los medios a disposición para dirigir tráfico a los vídeos de dicho canal; por ello, Blogger se ha convertido en una herramienta esencial, no sólo para compartir información, sino para promocionar los vídeos de Youtube. Dicho esto, les traigo diferentes widgets que pueden adaptar al estilo de su canal y al tipo de exposición que quieren alcanzar. Cabe destacar que el diseño de los widgets son completamente responsive, por lo que se adptaran a cualquier tamaño de pantalla, incluso si es móvil.
Está creado para ser utilizado debajo del título del blog, con la intención de destacar un único vídeo del canal. Para actualizarlo, debe hacerse de manera manual. Ló unico que se debe hacer es cambiar "url de tu video" por la dirección de tu vídeo en youtube. Para ello, copias la dirección y le agregas "/embed/".
Ejemplo, esta es la url de mi vídeo:
https://www.youtube.com/watch?v=NN7Nw3c-fNU y la debo cambiar a: https://www.youtube.com/embed/NN7Nw3c-fNU. De esta manera se visualizará tu vídeo en blogger.
AQUÍ TE DEJO EL CODIGO PARA QUE TU PUEDAS UTILIZARLO EN TU BLOG
<div class="table-responsive">
<table width="100%" border="0" cellpadding="0" position:"fixed">
<tr>
<td>
<div class="responsiveContent">
<iframe src="url de tu video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
</div>
</td>
</tr>
</table>
</div>
<style>
.responsiveContent { position: relative; height: 0; overflow: hidden; padding-bottom: 56.2%; margin-bottom: 20px; }
.responsiveContent iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
ADEMAS TAMBEN TENEMOS LA OPCION DE PONER UNA LISTA DE VIDEOS EN NUESTRO BLOG, EL CUAL TE DEJAMOS LOS CODIGOS SIGUIENTES:
Fue creado con la intención de destacar aún mas vídeos del canal al ser colocado debajo del titulo del blog; quedando alineados de manera horizontal. Sólo debes agregar 3 vídeos diferentes. Para actualizarlo, debe hacerse de manera manual. Ló unico que se debe hacer es cambiar "url de tu video" por la dirección de tu vídeo en youtube.
Para ello, copias la dirección y le agregas "/embed/".
Ejemplo, esta es la url de mi vídeo:
y la debo cambiar a:
De esta manera se visualizarán 3 vídeos en tu blogger.
<div class="table-responsive">
<table width="100%" border="0" cellpadding="0" position:"fixed">
<tr>
<td>
<div class="responsiveContent">
<iframe src="url de tu video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</td>
<td>
<div class="responsiveContent">
<iframe src="url de tu video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</td>
<td>
<div class="responsiveContent">
<iframe src="url de tu video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</td>
</tr>
</table>
</div>
<style>
.responsiveContent { position: relative; height: 0; overflow: hidden; padding-bottom: 56.2%; margin-bottom: 20px; }
.responsiveContent iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
VIDEOS PARA BARRA LATERAL DE BLOGGER
Para que sea visto en todas las pantallas del blog, se puede ubicar el vídeo en la barra lateral del blog, quedando alineado de manera vertical. Se puede realizar esta vista con 1 sólo vídeo o con varios vídeos. Al igual que en los widgets anteriores se debe actualizar manualmente e incluir las url de cada vídeo respectivamente. Debe ser utilizado sólo con fondos blancos.
Código Para 1 Vídeo:
<div class="table-responsive">
<table width="100%" border="0" cellpadding="0" position:"fixed">
<tr>
<td>
<div class="responsiveContent">
<iframe src="url de tu video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</td>
</tr>
</table>
</div>
<style>
.responsiveContent { position: relative; height: 0; overflow: hidden; padding-bottom: 56.2%; margin-bottom: 20px; }
.responsiveContent iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
Código Para 3 Vídeos:
<div class="table-responsive">
<table width="100%" border="0" cellpadding="0" position:"fixed">
<tr>
<td>
<img src="http://img.fenixzone.net/i/QKonl1g.jpeg" width="100%" />
</td>
</tr>
<tr>
<td>
<div class="responsiveContent">
<iframe src="url del vídeo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</td>
</tr>
<tr>
<td><img src="http://img.fenixzone.net/i/QKonl1g.jpeg" width="100%" /></td>
</tr>
<tr>
<td>
<div class="responsiveContent">
<iframe src="url del video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</td>
</tr>
<tr>
<td>
<img src="http://img.fenixzone.net/i/QKonl1g.jpeg" width="100%" />
</td>
</tr>
<tr>
<td>
<div class="responsiveContent">
<iframe src="url del video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
</div>
</td>
</tr>
</div>
<style>
.responsiveContent { position: relative; height: 0; overflow: hidden; padding-bottom: 56.2%; margin-bottom: 20px; }
.responsiveContent iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
