Gadget videos de YouTube

crear lista de videos de youtube en Blogger

Inserta videos de YouTube agregando una lista de IDs en el campo de texto. Los videos no cargarán hasta que el usuario haga click.

<b:includable id='main'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
    <style>/*<![CDATA[*/
.ytube{display:grid;gap:var(--yt-gap,1rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}.ytube textarea{display:none}.ytube-item{position:relative;overflow:hidden;cursor:pointer;background-color:#000;box-shadow:0 1px 4px 0 rgba(0,0,0,.2)}.ytube-item:before{content:"";display:block;padding-top:56.25%}.ytube-item *{-o-object-fit:cover;object-fit:cover;position:absolute;inset:0;width:100%;height:100%;border:0 none}.ytube-item:hover{--yt-is:1.25}.ytube-play{stroke-width:3;stroke:var(--yt-icon-color,#fff);width:var(--yt-icon-size,3rem);transform:scale(var(--yt-is,1));transition:transform .3s;stroke-linejoin:round;fill:none;margin:auto;z-index:1}/*]]>*/</style>
    <div class="ytube">
      <div class="ytube-item"/>
      <textarea><data:content/></textarea>
    </div>
    <script>//<![CDATA[
      document.addEventListener("DOMContentLoaded", (event) => {
const ytube=(()=>{if(window.ytube)return;const e=document.querySelectorAll(".ytube");e.forEach((e=>{const t=function(e){return e.querySelector("textarea").value.split("\n").map((e=>e.trim())).filter((e=>""!==e))}(e),n=document.createDocumentFragment();t.forEach((e=>{const t=document.createElement("div");t.classList.add("ytube-item"),t.innerHTML='<svg class="ytube-play" viewBox="0 0 24 24"><path d="m7 3 14 9-14 9z"></path></svg>',t.appendChild(function(e){const t=document.createElement("img");return t.classList.add("ytube-thumbnail"),t.src=`https://img.youtube.com/vi/${e}/mqdefault.jpg`,t.alt="thumbnail",t.loading="lazy",t}(e)),t.addEventListener("click",(()=>{t.innerHTML="",t.appendChild(function(e){const t=document.createElement("iframe");return t.classList.add("ytube-embed"),t.src=`https://www.youtube.com/embed/${e}?autoplay=1`,t.setAttribute("frameborder","0"),t.setAttribute("allowfullscreen","1"),t}(e))})),n.appendChild(t)})),e.innerHTML="",e.appendChild(n)})),window.ytube=!0})();
      });//]]>
    </script>
  </div>
</b:includable>

Ver en CodePen

Este gadget te permite insertar videos de YouTube agregando una lista de IDs en el campo de texto. Los módulos no cargan los videos hasta que el usuario hace clic en ellos, por lo que no ralentizan la carga de la página.

Instalar

Presiona el botón instalar de este articulo, selecciona el blog en el que deseas instalar el widget y ya lo podrás encontrar en tu blog. El código está optimizado para que no suponga una carga adicional.

Si tu plataforma no es Blogger, te recomiendo revisar el código fuente del widget que encontrarás en codepen, para que puedas adaptarlo a tu proyecto.

Configurar

Solo tienes que agregar los IDs de los videos que deseas mostrar. Debes agregar un ID por linea, sin espacios ni comas. Para obtener el ID de un video, copia el texto que aparece después de v=, por ejemplo:

https://www.youtube.com/watch?v=XXXXXXXXXXX

En este caso el ID es XXXXXXXXXXX. Luego de agregar los IDs y guardar los cambios, los módulos de video se mostrarán en el orden en el que los agregaste.

Personalizar

Para personalizar el aspecto del contador, he dejado algunas variables css que puedes especificar con un nuevo valor, para ello dirígete a la sección Temas > Personalizar > Avanzado > Añadir CSS y pega el siguiente código:

.ytube {
  --yt-gap: 1rem;
  --yt-icon-color: #fff;
  --yt-icon-size: 3rem;
}

Podrás cambiar el tamaño del icono, el color y el espacio entre cada módulo.

Conclusión

Con este gadget podrás agregar videos de YouTube a tu blog y que estos no carguen hasta que el usuario los solicite. Espero que te sea de utilidad y si tienes alguna duda, puedes dejarla en los comentarios.