# Vídeos en bucle: cómo crean las marcas clips que nunca terminan

[Canonical HTML page](https://gradiently.design/es/guide/looping-video-background)

Un buen bucle se reproduce todo el día en un escaparate, se queda detrás del titular de una web o gira bajo una canción, y nadie nota dónde empieza. Así es como lo usan las marcas.

## The short version

- Un vídeo en bucle es un clip corto que se repite sin parar, diseñado para que la unión entre su final y su principio sea invisible.
- Las marcas usan vídeos en bucle en cabeceras web, pantallas de tienda, posts en redes, canvas musicales, escenarios de eventos y pantallas de espera de directos.
- Cuanto más despacio se mueve un bucle, más largo debería ser, porque el movimiento lento hace más fácil detectar la repetición.
- Los bucles parecen infinitos cuando nada en ellos ocurre una sola vez: ningún destello, corte u objeto aislado que marque el reinicio.
- En las webs, un vídeo en bucle debería ir silenciado, reproducirse en línea, llevar una imagen de póster y respetar los ajustes de movimiento reducido.

Un **vídeo en bucle** es un clip corto creado para repetirse para siempre sin que nadie vea dónde vuelve a empezar. Para las marcas es uno de los formatos más útiles que existen: un solo archivo puede correr detrás del titular de una web, en una pantalla junto a la caja, bajo una canción en Spotify o detrás de la pantalla de espera de un directo. El oficio es fácil de explicar. Haz que el último fotograma lleve directamente al primero, mantén el movimiento lento y continuo, y nunca metas un acontecimiento aislado en el clip, porque todo lo que ocurre una vez se convierte en una señal del reinicio.

## Dónde usan las marcas un vídeo en bucle

Los bucles encajan en cualquier sitio al que la gente llega en un momento cualquiera y se queda un tiempo desconocido. Nadie empieza a mirar un escaparate en el segundo cero, así que una historia con principio y final no tiene la forma adecuada. Un bucle no tiene principio, y de eso se trata.

| Lugar | Tamaño | Duración habitual | Sonido |
| --- | --- | --- | --- |
| Cabecera web | 1920×1080 | 10 a 30 segundos | Nunca |
| Pantalla de tienda o escaparate | 1920×1080 o 1080×1920 | 20 a 30 segundos | Rara vez |
| Reel o story de Instagram | 1080×1920 | 5 a 15 segundos | Opcional |
| Post del feed | 1080×1350 | 5 a 10 segundos | Opcional |
| Canvas de Spotify | 1080×1920 | 3 a 8 segundos | Viene de la canción |
| Pantalla offline de Twitch | 1920×1080 | 20 a 30 segundos | Opcional |

Puntos de partida, no reglas. Los límites de las plataformas cambian, así que consulta las indicaciones de cada una antes de publicar.

Diseño de pantalla horizontal para el escaparate de una cafetería con un degradado cálido que se mueve despacio y un titular fijo

Un bucle horizontal para el escaparate de una cafetería. El color se mueve; las palabras se quedan quietas para leerse desde la otra acera.

Pantalla de espera de un directo con el texto Volvemos tras la pausa, sobre un degradado en bucle tranquilo

Una pantalla de espera para un directo. Puede estar diez minutos en pantalla, así que el movimiento tiene que ser tranquilo.

Cada uno de estos lugares tiene sus propias reglas de tamaño y sonido. [Vídeos de fondo para webs](https://gradiently.design/es/guide/video-background-website) cubre en detalle el caso web, y [vídeos de fondo ambientales](https://gradiently.design/es/guide/ambient-video) trata los bucles largos y tranquilos que corren en pantallas y directos.

## Qué hace que un bucle parezca infinito

Técnicamente, un bucle solo necesita que su final coincida con su principio. Perceptivamente, necesita más. La gente nota la repetición por los puntos de referencia: el momento en que una zona clara pasa por una esquina, el fotograma en que entra una forma, un parpadeo de grano que siempre cae en el mismo sitio. Quita los puntos de referencia y un clip de doce segundos puede parecer que dura horas.

- **Movimiento continuo.** Desplazamientos, rotaciones y paneos lentos que nunca se detienen. Parar y arrancar crea un ritmo que la vista puede contar.
- **Ciclos completos.** Todo lo que se mueve completa un número entero de vueltas o pasadas en la duración del clip, así que termina exactamente donde empezó.
- **Varias capas a velocidades relacionadas.** Un fondo que hace un ciclo y un brillo que hace dos disimulan la repetición del otro.
- **Ningún acontecimiento aislado.** Ni destellos, ni cortes, ni cortinillas de logo, ni objetos que aparezcan una vez. Si ocurre una vez, marca el reinicio.
- **Palabras quietas.** Un texto que entra animado volverá a entrar animado en cada bucle. En un vídeo en bucle, deja que las palabras simplemente estén ahí.

El detalle fotograma a fotograma de una unión limpia, incluido el último fotograma duplicado que causa la mayoría de los saltos, está en [vídeo en bucle perfecto](https://gradiently.design/es/guide/seamless-loop-video).

## Cuánto debería durar un vídeo en bucle

La duración depende de la velocidad y del tiempo que la gente vaya a mirar. Un bucle que alguien mira de reojo tres segundos puede ser corto. Un bucle que se reproduce en una pared toda la tarde tiene que ser lo bastante largo, y lo bastante lento, para que la repetición nunca resulte evidente. Los clips más largos pesan más, así que equilibra las dos cosas.

| Movimiento | Tiempo de visionado | Duración del bucle |
| --- | --- | --- |
| Vivo, se mueve claramente | Un vistazo | 5 a 10 segundos |
| Desplazamiento constante | De unos segundos a un minuto | 10 a 20 segundos |
| Muy lento, ambiental | Minutos u horas | 20 a 30 segundos |

Cuanto más lento es el movimiento y más tiempo mira la gente, más segundos necesita un bucle para que su repetición deje de notarse.

[Cuánto debe durar un vídeo en bucle](https://gradiently.design/es/guide/video-loop-length) analiza este equilibrio ubicación por ubicación, teniendo en cuenta el peso de los archivos.

## Cómo hacer un vídeo en bucle a partir de un diseño

1. **Empieza por el lugar donde se reproducirá** Elige primero el tamaño exacto: 1920×1080 para una pantalla horizontal o una cabecera, 1080×1920 para stories, reels y pantallas verticales, 1080×1350 para un post del feed.
2. **Elige una capa que se mueva** Normalmente el fondo. Un degradado o un material en movimiento es ideal, porque no tiene bordes que delaten el bucle.
3. **Mantén las palabras quietas y tranquilas** Coloca el texto donde el fondo esté más calmado. Si algo tiene que animarse, deja el movimiento dentro del fondo.
4. **Ajusta la duración a ciclos completos** Asegúrate de que cada movimiento completa un número entero de ciclos en el clip, para que el último fotograma fluya hacia el primero.
5. **Exporta como vídeo y míralo en bucle** Exporta en MP4, o WebM para la web, y reprodúcelo en repetición a tamaño completo durante al menos un minuto. Corrige todo lo que notes dos veces.

Fondo cálido para el bucle de una cafetería: `radial-gradient(120% 90% at 30% 25%, #fde68a 0%, #f59e0b 30%, #b45309 60%, #3b1405 100%)`

Un bucle funciona mejor sobre un fondo así: color suave y sin bordes que puede desplazarse sin mostrar nunca una costura.

Aquí es donde encaja Gradiently. Cada Mark es un fondo vivo de degradado y material que ya se mueve, así que con Pro un diseño creado sobre él se exporta como un bucle perfecto de 5 a 30 segundos sin que tengas que animar nada. Como no hay dos Marks iguales, el bucle de tu escaparate no será el mismo fondo de stock que el de la tienda de al lado.

## Cómo poner un vídeo en bucle en una web

Los navegadores solo reproducen automáticamente los vídeos silenciados, y los móviles necesitan `playsinline` para mantenerlo dentro de la página. Añade una imagen de póster para que se vea algo antes de que cargue el vídeo, y ofrece primero el WebM, más ligero, con el MP4 como alternativa.

```html
<video class="hero-loop" autoplay muted loop playsinline
       poster="hero-first-frame.jpg" width="1920" height="1080">
  <source src="hero-loop.webm" type="video/webm">
  <source src="hero-loop.mp4" type="video/mp4">
</video>

<style>
  @media (prefers-reduced-motion: reduce) {
    .hero-loop { display: none; }
    .hero { background: url(hero-first-frame.jpg) center / cover; }
  }
</style>
```

Un vídeo en bucle silenciado y en línea, con póster. Quien pide a su dispositivo menos movimiento ve en su lugar el primer fotograma fijo.

Esa última regla importa. A algunas personas el movimiento constante les distrae o les resulta físicamente incómodo, y su sistema operativo se lo comunica al navegador. [Prefers reduced motion](https://gradiently.design/es/guide/reduced-motion) explica cómo respetarlo bien.

### Evita

- Un logo que entra animado al principio de cada bucle
- Un salto visible donde el clip vuelve a empezar
- Movimiento rápido detrás de texto pequeño
- Un bucle con sonido en una web
- Un GIF donde serviría un vídeo

### Haz

- Un logo quieto sobre un fondo en movimiento
- Ciclos completos, para que el final se una al principio
- Movimiento lento con una zona tranquila para el texto
- Silenciado, en línea, con imagen de póster
- MP4 o WebM, y el GIF para el email

## FAQ

### ¿Qué es un vídeo en bucle?

Un vídeo corto diseñado para repetirse sin parar, con un final que fluye directamente hacia su principio para que el reinicio sea invisible. Las marcas los usan en webs, pantallas, posts en redes y directos.

### ¿Cuánto debería durar un vídeo en bucle?

Los bucles vivos pueden durar de 5 a 10 segundos; los bucles de fondo constantes suelen rondar los 10 a 20 segundos; los bucles lentos para pantallas que se ven todo el día ganan con 20 a 30 segundos, porque así la repetición cuesta más de notar.

### ¿Qué formato es mejor para un vídeo en bucle?

El MP4 se reproduce casi en cualquier sitio y es la opción segura para las redes sociales. En las webs, ofrece primero WebM y MP4 como alternativa. Deja el GIF para el email.

### ¿Por qué mi vídeo en bucle salta al final?

Normalmente porque el último fotograma repite el primero, o porque algo del clip no completa un ciclo entero. Quita el fotograma duplicado y haz que cada movimiento termine donde empezó.

### ¿Un vídeo en bucle puede llevar texto?

Sí, pero deja el texto quieto. Las palabras que entran animadas volverán a entrar animadas en cada bucle, lo que hace evidente el reinicio.
