Hoy quiero enseñarte a crear algo muy visual y efectivo para tu página de inicio, landing page o cualquier otra página donde necesites un hero con video de YouTube en autoplay que solo reproduce un fragmento concreto del video, como si fuese un gif animado, y que además incluye un slider de contenido encima del propio video.
Y lo mejor de todo es que no necesitas plugins, solo un bloque de HTML personalizado en Gutenberg usando HTML, CSS y JavaScript directamente. ¡Sencillo y ligero!
¿Qué hace exactamente este snippet?
- Reproduce un video de YouTube en bucle infinito, sin sonido y sin controles visibles.
- Solo muestra un fragmento específico del video (por ejemplo, del segundo 5 al segundo 40).
- Encima del video, un slider con 3 secciones que puedes personalizar: título, subtítulo, texto y botón.
- Con navegación mediante bolitas (dots) y cambio automático cada 5 segundos.
¿Por qué es útil?
Si quieres que tu web tenga un efecto visual tipo «cinemagraph» o video de fondo pero sin cargar videos locales pesados, esta solución es perfecta. Además, puedes usarlo tanto en una página de inicio como en cualquier sección que quieras destacar.
Copia el siguiente código y agrégalo en un bloque de HTML de Gutenberg.
<style>
.hero-container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.hero-container iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 177.77vh;
height: 100vh;
pointer-events: none;
z-index: 1;
filter: brightness(0.5);
}
.hero-slider {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
max-width: 800px;
text-align: center;
color: #fff;
}
.slide {
display: none;
}
.slide.active {
display: block;
}
.hero-slider h1 { font-size: 3rem; margin-bottom: 10px; color: #fff; }
.hero-slider h2 { font-size: 1.4rem; margin-bottom: 10px; font-weight: normal; color: #fff; }
.hero-slider p { font-size: 1.1rem; margin-bottom: 20px; color: #fff; }
.hero-slider a {
display: inline-block;
padding: 12px 25px;
background: #13b0a0;
color: #fff;
text-decoration: none;
border-radius: 6px;
font-weight: bold;
transition: background 0.3s;
}
.hero-slider a:hover {
background: #009975;
}
.dots {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 4;
}
.dot {
width: 14px;
height: 14px;
background: rgba(255,255,255,0.6);
border-radius: 50%;
cursor: pointer;
transition: background 0.3s;
}
.dot.active {
background: #13b0a0;
}
</style>
<div class="hero-container">
<iframe src="https://www.youtube.com/embed/CP8to7rnyqE?autoplay=1&mute=1&start=5&end=40&loop=1&playlist=CP8to7rnyqE&controls=0&showinfo=0&modestbranding=1&rel=0&fs=0&iv_load_policy=3&disablekb=1&playsinline=1&autohide=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
<div class="hero-slider">
<div class="slide active">
<h1>Sección 1</h1>
<h2>Subtítulo 1</h2>
<p>Texto descriptivo de la primera sección.</p>
<a href="#">Ver más</a>
</div>
<div class="slide">
<h1>Sección 2</h1>
<h2>Subtítulo 2</h2>
<p>Texto descriptivo de la segunda sección.</p>
<a href="#">Descubrir</a>
</div>
<div class="slide">
<h1>Sección 3</h1>
<h2>Subtítulo 3</h2>
<p>Texto descriptivo de la tercera sección.</p>
<a href="#">Leer más</a>
</div>
</div>
<div class="dots">
<div class="dot active" data-slide="0"></div>
<div class="dot" data-slide="1"></div>
<div class="dot" data-slide="2"></div>
</div>
</div>
<script>
const slides = document.querySelectorAll('.slide');
const dots = document.querySelectorAll('.dot');
let current = 0;
function showSlide(index) {
slides.forEach((s, i) => {
s.classList.toggle('active', i === index);
dots[i].classList.toggle('active', i === index);
});
current = index;
}
function autoPlay() {
current = (current + 1) % slides.length;
showSlide(current);
}
let interval = setInterval(autoPlay, 5000);
dots.forEach(dot => {
dot.addEventListener('click', () => {
clearInterval(interval);
showSlide(parseInt(dot.dataset.slide));
interval = setInterval(autoPlay, 5000);
});
});
</script>
Lenguaje del código: HTML, XML (xml)¿Cómo personalizar este bloque?
Cambiar la URL del video
Ubica este fragmento dentro del iframe y reemplaza el ID del video por el de tu video:
src="https://www.youtube.com/embed/CP8to7rnyqE?autoplay=1&mute=1&start=5&end=40&loop=1&playlist=CP8to7rnyqE"
Cambia CP8to7rnyqE por tu propio ID de video.
Modificar los segundos de reproducción
En la misma URL puedes cambiar estos parámetros:
start=5➡ indica desde qué segundo empieza.end=40➡ indica en qué segundo se reinicia.
Personalizar los textos del slider
En la parte de las secciones del slider, puedes editar fácilmente:
<h1>Sección 1</h1> <h2>Subtítulo 1</h2> <p>Texto descriptivo de la primera sección.</p> <a href="#">Ver más</a>
Cambia los textos y añade o elimina secciones según lo que necesites.
Cambiar colores y estilo
Desde el CSS puedes modificar:
- El color del botón (
background: #13b0a0;) - El color de las bolitas de navegación (
.dot.active) - Tamaño de títulos y subtítulos (
font-sizeen.hero-slider h1y.hero-slider h2)
Ajustar la velocidad del slider
El valor 5000 en este fragmento indica que cambia cada 5 segundos:
let interval = setInterval(autoPlay, 5000);
Puedes cambiarlo a 7000 o el tiempo que quieras en milisegundos.
¿Y qué más podría hacer?
- Puedes convertirlo en un slider de más de 3 secciones añadiendo más
.slide. - También podrías añadirle un efecto «fade-in» a los textos o animaciones con
@keyframes. - Incluso podrías incrustar un formulario encima del video para captar leads.
Si necesitas algo más personalizado y no sabes como hacerlo, contáctame por WhatsApp y lo miramos.
Conclusión
Con este simple código puedes tener un hero con video de fondo tipo cinemagraph, sin tener que usar constructores pesados o plugins. Gutenberg y un bloque HTML es todo lo que necesitas.
Nos vemos en el siguiente tutorial. Un saludo.
¿Alguna duda o sugerencia? Déjala en los comentarios.