Cómo Agregar un Video de YouTube a tu Sitio Web de Blogger

Agregar videos de YouTube a tu sitio web de Blogger es fácil y puede mejorar la experiencia del usuario. Sigue estos pasos para insertar un video en tu blog utilizando el enlace proporcionado:

Paso 1: Obtener el Enlace del Video de YouTube

Primero, copia el enlace completo del video de YouTube que deseas agregar. En este caso, el enlace es:

https://www.youtube.com/watch?v=WHBG0MTX35c&t=1s

Paso 2: Obtener la Identificación del Video

De este enlace, extrae la identificación única del video, que es la parte después de "v=". En este caso, la identificación del video es "WHBG0MTX35c".

Paso 3: Acceder al Panel de Blogger

Inicia sesión en tu cuenta de Blogger y accede al panel de control de tu blog.

Paso 4: Crear una Nueva Entrada o Editar una Existente

Crea una nueva entrada o selecciona una entrada existente que deseas editar.

Paso 5: Cambiar al Modo HTML

En el editor de entradas, busca la pestaña que dice "HTML" o "Editar HTML". Esto te permitirá editar directamente el código HTML de tu entrada.

Paso 6: Insertar el Código del Video

En el lugar donde deseas que aparezca el video, inserta el siguiente código:

JS<div class="youtube-player" data-id="WHBG0MTX35c"></div>

<style>
  .youtube-player {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 5px;
  }

  .youtube-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
  }

  .youtube-player img {
    object-fit: cover;
    display: block;
    left: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
  }

  .youtube-player .play {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiITlL8bnaeJYOAx_oECyaXgniRZOjnXDmaFyuepWhowtKV7xyDqOruDe2LHs-EMHYyZNtvbA1y_H_rREKt-gGD-mdOWNbKleiM88pbz6jHaOnq9YXYgH-6GhrWOOoSdpYbkojkjpUTMBOr/s16000/play-button.png") no-repeat;
    cursor: pointer;
  }
</style>

<script type='text/javascript'>
  function labnolIframe(div) {
    var iframe = document.createElement("iframe");
    iframe.setAttribute(
      "src",
      "https://www.youtube.com/embed/" + div.dataset.id + "?autoplay=1&rel=0"
    );
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("allowfullscreen", "1");
    iframe.setAttribute(
      "allow",
      "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    );
    div.parentNode.replaceChild(iframe, div);
  }

  document.addEventListener("DOMContentLoaded", function () {
    var playerElement = document.querySelector(".youtube-player");
    var videoId = playerElement.dataset.id;
    var thumbnail = document.createElement("img");
    thumbnail.src = "https://i.ytimg.com/vi/" + videoId + "/hqdefault.jpg";
    thumbnail.addEventListener("click", function () {
      labnolIframe(playerElement);
    });
    playerElement.appendChild(thumbnail);

    var playButton = document.createElement("div");
    playButton.setAttribute("class", "play");
    playButton.addEventListener("click", function () {
      labnolIframe(playerElement);
    });
    playerElement.appendChild(playButton);
  });
</script>

Paso 7: Guardar y Publicar

Guarda los cambios y publica tu entrada. Ahora, cuando los visitantes de tu blog vean esta entrada, podrán hacer clic en la miniatura del video o en el ícono de reproducción para ver el video de YouTube directamente desde tu sitio web. ¡Listo! Has agregado con éxito un video de YouTube a tu sitio web de Blogger. Este método proporciona una forma atractiva de mostrar videos sin redirigir a los visitantes a YouTube. ¡Espero que encuentres útil esta guía!