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:
<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!
0 Comentarios