Lazy Load para videos de Youtube en el blog
Incrustar Lazy Load para videos de Youtube en blogs puede ser una forma de enriquecer el contenido y también una buena forma de promocionar nuestro canal de youtube. Sin embargo, si solo incrusta el video, puede tener un impacto en el rendimiento del blog.
En general, cuando los propietarios de blogs quieren incrustar videos de YouTube en sus blogs, inmediatamente incrustan el código copiado de YouTube en las publicaciones del blog sin dar ningún tratamiento. Como resultado, cuando se carga el blog, también se cargará el marco interno (iframe) de YouTube.
Como resultado, el blog tardará más hasta que la página cargue perfectamente. Para aquellos que no saben qué es un iframe, en resumen es html. Así que nuestra página de blog en forma de html cargará otro html en su cuerpo. Por lo tanto, la carga llevará más tiempo. Los bytes necesarios para cargar un iframe de youtube pueden alcanzar los 2 MB o incluso más.
Para superar esto, podemos ser más astutos usando javascript de carga diferida. La forma en que funciona es que el script inicialmente solo descargará imágenes en miniatura. En el área central de la miniatura habrá un botón de reproducción que, al hacer clic, activará el proceso de carga del video.
Por supuesto, este método es muy efectivo para que el video incrustado no afecte el rendimiento del blog. Hay varios scripts de youtube de carga diferida, pero el script creado por wingkwong es mi elección porque la línea de código es bastante simple y fácil de modificar. En este script, reduzco algunas líneas de código, a saber, el código de la persona que llama a la imagen de YouTube.
Creo que las imágenes en miniatura para YouTube se pueden agregar manualmente para que se puedan incrustar con el atributo "alt" que hace que el contenido sea más compatible con SEO. Pero si realmente no le importa y le da flojera volver a hacer clic, simplemente use el script original.
Para la instalación de este código javascript se puede copiar directamente encima del código de la plantilla del cuerpo y para completar y mejorar su apariencia, se pueden instalar unas pocas líneas de css en el área de la máscara del blog.
Método de instalación
Copie el siguiente código y péguelo justo encima de </body>
<script>
//<![CDATA[
!function(){"use strict";for(var t=document.querySelectorAll(".llyv"),e=0;e<t.length;e++){var i=document.createElement("div");i.className="llyv-play-btn",t[e].appendChild(i),t[e].addEventListener("click",function(){var t=document.createElement("iframe");for(t.setAttribute("src","https://www.youtube.com/embed/"+this.dataset.id+"?rel=0&showinfo=0&autoplay=1"),t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","");this.firstChild;)this.removeChild(this.firstChild);this.appendChild(t)})}}();
//]]>
</script>Luego copie el siguiente código CSS y péguelo justo encima del código </b:skin>
/*! llyv.css v0.1.0 */ .llyv,.llyv .llyv-play-btn,.llyv img{cursor:pointer} .llyv{background-color:#000;margin-bottom:20px;position:relative;padding-top:56.25%;overflow:hidden} .llyv img{width:100%;top:-16.82%} .llyv .llyv-play-btn{width:100px;height:60px;background-color:#282828;z-index:1;border-radius:9px} .llyv .llyv-play-btn:before{content:"";border-style:solid;border-width:15px 0 13px 28px;border-color:transparent transparent transparent #fff} .llyv .llyv-play-btn:hover{background-color:red} .llyv .llyv-play-btn,.llyv .llyv-play-btn:before,.llyv iframe,.llyv img{position:absolute} .llyv iframe{height:100%;width:100%;top:0;left:0}.llyv .llyv-play-btn,.llyv .llyv-play-btn:before{top:50%;left:50%;transform:translate3d(-50%,-50%,0)}Después copie el código y péguelo en cualquier parte de su pagina. No olvides entrar en modo HTML. Reemplace el texto id-video con la identificación del video que desea incrustar.
Ejemplo id de un video como el que puse en rojo, https://www.youtube.com/watch?v=B961ypoo0I4
<div class="llyv" data-id="id-video">
<img src="https://img.youtube.com/vi/id-video/hqdefault.jpg"/></div>Así queda:
<div class="llyv" data-id="B961ypoo0I4">
<img src="https://img.youtube.com/vi/B961ypoo0I4/hqdefault.jpg"/></div>Para aquellos que son súper flojos, pueden usar el post original. Más tarde, el marcado que se hace en la publicación es solo una línea. El método de instalación es el mismo que los pasos anteriores.
JavaScript
<script> //<![CDATA[ /*! llyv.js v0.1.0 */ !function(){"use strict";for(var t=document.querySelectorAll(".llyv"),e=0;e<t.length;e++){var i=document.createElement("div");i.className="llyv-play-btn",t[e].appendChild(i);var l=document.createElement("img");l.src="https://img.youtube.com/vi/"+t[e].dataset.id+"/hqdefault.jpg",t[e].appendChild(l),t[e].addEventListener("click",function(){var t=document.createElement("iframe");for(t.setAttribute("src","https://www.youtube.com/embed/"+this.dataset.id+"?rel=0&showinfo=0&autoplay=1"),t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","");this.firstChild;)this.removeChild(this.firstChild);this.appendChild(t)})}}(); //]]> </script>CSS
/* * llyv.css
* Optimizing the performance while loading multiple YouTube videos on the same page
* @license MIT
* @version 0.1.0
* @author Wong, Wing Kam - @wingkwong
* @updated 2018-07-11
* @link https://github.com/wingkwong/lazy-load-youtube-videos
*/ .llyv,.llyv .llyv-play-btn,.llyv img{cursor:pointer} .llyv{background-color:#000;margin-bottom:30px;position:relative;padding-top:56.25%;overflow:hidden} .llyv img{width:100%;top:-16.82%} .llyv .llyv-play-btn{width:100px;height:60px;background-color:#282828;z-index:1;border-radius:9px} .llyv .llyv-play-btn:before{content:"";border-style:solid;border-width:15px 0 13px 28px;border-color:transparent transparent transparent #fff} .llyv .llyv-play-btn:hover{background-color:red} .llyv .llyv-play-btn,.llyv .llyv-play-btn:before,.llyv iframe,.llyv img{position:absolute} .llyv iframe{height:100%;width:100%;top:0;left:0} .llyv .llyv-play-btn,.llyv .llyv-play-btn:before{top:50%;left:50%;transform:translate3d(-50%,-50%,0)} Marcado en publicaciones
<div class="llyv" data-id="id-video">Esperemos que sea útil...
Código de referencia:
https://www.npmjs.com/package/lazy-load-youtube-videos
Deja una respuesta