Vídeos de YouTube en Blogger

Cómo insertar vídeos de YouTube con carga diferida (Lazy Load) en Blogger

En este tutorial aprenderás a integrar vídeos de YouTube con carga diferida en tu blog Blogger utilizando la plantilla NichoClean v2.0. Esta función está pensada para mejorar la velocidad de carga, la experiencia del usuario y, por supuesto, tu SEO on-page.

¿Por qué usar carga diferida (lazy load) en vídeos?

Normalmente, cuando insertas un vídeo de YouTube con un <iframe> tradicional, el navegador tiene que cargar el reproductor completo apenas abres la página. Esto puede hacer tu blog más lento y afectar tus Core Web Vitals.

Con la carga diferida (lazy load), el reproductor de YouTube solo se carga cuando el usuario hace clic en la miniatura. De esta manera:

  • Tu blog carga mucho más rápido.
  • Los visitantes ven una miniatura limpia en lugar de un iframe pesado.
  • Solo se consume ancho de banda cuando el vídeo realmente se reproduce.
  • Mejoras tu posicionamiento SEO al optimizar tiempos de carga.

Cómo funciona en NichoClean v2.0

La plantilla NichoClean v2.0 ya incluye un script de reproductor inteligente que soporta YouTube, Vimeo y vídeos MP4. El funcionamiento es sencillo: tú insertas un bloque de HTML con atributos data- y el script se encarga del resto.

Código del reproductor de vídeo

Este es el código JavaScript que ya viene integrado en la plantilla:

<!-- 19. Js Reproductor de video  -->
<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".media-player").forEach(function (el) {
    const type = el.dataset.type;
    const id = el.dataset.id;
    const src = el.dataset.src;
    const poster = el.dataset.poster;

    // Miniatura
    if (type === "youtube" && id) {
      el.style.backgroundImage = `url('https://img.youtube.com/vi/${id}/hqdefault.jpg')`;
    } else if (type === "vimeo" && id) {
      fetch(`https://vimeo.com/api/v2/video/${id}.json`)
        .then(res => res.json())
        .then(data => {
          el.style.backgroundImage = `url('${data[0].thumbnail_large}')`;
        });
    } else if (poster && type === "mp4") {
      el.style.backgroundImage = `url('${poster}')`;
    }

    // Reproducir al hacer clic
    el.addEventListener("click", function () {
      el.classList.add("active");
      el.style.backgroundImage = "none";

      let embed = "";
      if (type === "youtube") {
        embed = `<iframe src="https://www.youtube.com/embed/${id}?autoplay=1&rel=0" allow="autoplay; encrypted-media" allowfullscreen title="YouTube"></iframe>`;
      } else if (type === "vimeo") {
        embed = `<iframe src="https://player.vimeo.com/video/${id}?autoplay=1" allow="autoplay; fullscreen" allowfullscreen title="Vimeo"></iframe>`;
      } else if (type === "mp4") {
        embed = `<video controls autoplay poster="${poster || ''}" playsinline><source src="${src}" type="video/mp4">Tu navegador no soporta video HTML5.</video>`;
      }

      el.innerHTML = embed;

      // Manejo de pausa/play en móviles (solo MP4)
      if (type === "mp4") {
        setTimeout(() => {
          const video = el.querySelector("video");
          if (video) {
            el.addEventListener("touchstart", function () {
              if (video.paused) video.play();
              else video.pause();
            });
          }
        }, 500);
      }
    }, { once: true });
  });
});
//]]>
</script>

Cómo insertar un vídeo de YouTube en tu post

Para insertar un vídeo con lazy load, solo necesitas copiar este bloque HTML y pegarlo en tu entrada, página o incluso en el index:

<div class="media-player" data-type="youtube" data-id="dQw4w9WgXcQ"></div>

Qué significa cada parte del código

  • class="media-player": activa el estilo y el script de reproducción.
  • data-type="youtube": indica que el vídeo es de YouTube (puede ser vimeo o mp4).
  • data-id="dQw4w9WgXcQ": este es el ID del vídeo. Lo obtienes de la URL de YouTube (ejemplo: https://www.youtube.com/watch?v=dQw4w9WgXcQ → el ID es dQw4w9WgXcQ).

Ejemplo práctico

Si quieres insertar un vídeo diferente, solo cambia el ID en la etiqueta data-id. Por ejemplo:

<div class="media-player" data-type="youtube" data-id="VIDEO_ID_AQUI"></div>

Donde VIDEO_ID_AQUI es el código único de tu vídeo.

Recomendaciones importantes

  • No insertes iframes tradicionales si ya usas este sistema: harás tu blog más lento.
  • Si vas a usar Vimeo, solo cambia data-type="vimeo" y coloca el data-id del vídeo.
  • Para archivos MP4 propios, utiliza data-type="mp4", agrega data-src con la URL del vídeo y opcionalmente data-poster para la miniatura.

Integrar vídeos de YouTube con carga diferida en Blogger nunca había sido tan sencillo. Gracias a la plantilla NichoClean v2.0, puedes disfrutar de un blog más rápido, limpio y optimizado para SEO. Solo necesitas cambiar un par de etiquetas y tendrás un reproductor profesional en tu sitio.

Recuerda: optimizar cada recurso visual mejora tu velocidad, tus visitas y, al final, tus ingresos.