Como Agregar Videos de Youtube Responsive en Blogger

La ultima forma de incorporar vídeos de Youtube receptivos o responsivos en blogger se ha convertido en una parte importante de todo sitio web. Agregar vídeos que se adapten a cualquier plataforma de forma automática para la mejor vista de los lectores del blog.

Youtube nos ofrece muchas ventajas, una de las cuales es la función de incrustar vídeos que se puede agregar y ver directamente en el blog.

Mal implementado los vídeos reduce el valor SEO de un blog, debido al elemento iframe y su apariencia no responsiva que no son capaces de adaptarse al tamaño de la pantalla.

Por ese motivo a continuación, le indicamos cómo Instalar vídeos de Youtube totalmente receptivos en Blogger que no reducirá el valor SEO de nuestro blog, todo lo contrario servirá para posicionar una publicación en especifico por la relevancia que le da google ahora a los vídeos en las publicaciones:

1º Ingresar a su cuenta de Blogger, buscar la opción Tema / Editar HTML aquí debemos agregar el siguiente código CSS arriba del cierre ]]></b:skin> o </style>

/* Youtube Responsive */
@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
.loader{position:relative;width:100%;float:left;overflow:hidden;height:350px;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}
.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

2º En  el mismo Editar HTML agregar el siguiente código script arriba del código de cierre </body> y Guardar los cambios en la plantilla.

<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>

3º Por ultimo, para agregar vídeos en cualquier entrada o publicación en blogger, debemos usar siempre el siguiente código agregándolo en la sección Vista HTML de la edición de entradas

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/ID DEL VÍDEO">
</div>
</div>
</div>

Solo debes cambiar la ID DEL VÍDEO por la identidad de tu vídeo en Youtube, darle en guardar o publicar. Ahora incrustar o insertar vídeos de youtube en las publicaciones del blogger es sensible, lo que significa que el vídeo se adaptara automáticamente al tamaño de cualquier pantalla.

Ejemplo de la identidad de un vídeo en youtube