# Vídeo em loop: como as marcas fazem clipes que parecem não ter fim

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

Um bom loop roda numa vitrine o dia inteiro, fica atrás do título de um site ou gira sob uma música, e ninguém percebe onde ele começa. Veja como as marcas colocam os loops para trabalhar.

## The short version

- Um vídeo em loop é um clipe curto que se repete sem parar, feito para que a emenda entre o fim e o começo seja invisível.
- As marcas usam vídeos em loop no topo de sites, em telas de loja, em posts nas redes, em canvas de música, em palcos de eventos e em telas de espera de lives.
- Quanto mais devagar um loop se move, mais longo ele deve ser, porque o movimento lento facilita notar a repetição.
- Um loop parece infinito quando nada nele acontece uma única vez: nenhum flash, corte ou objeto isolado que marque o recomeço.
- Em sites, um vídeo em loop deve ficar sem som, tocar inline, ter uma imagem de pôster e respeitar a configuração de movimento reduzido.

Um **vídeo em loop** é um clipe curto feito para se repetir para sempre sem que ninguém veja onde ele recomeça. Para marcas, é um dos formatos mais úteis que existem: um único arquivo pode rodar atrás do título de um site, numa tela perto do caixa, sob uma música no Spotify ou atrás da tela de espera de uma live. O ofício é simples de explicar. Faça o último quadro levar direto ao primeiro, mantenha o movimento lento e contínuo, e nunca coloque um evento isolado no clipe, porque tudo que acontece uma vez vira um marcador do recomeço.

## Onde as marcas usam vídeo em loop

Loops servem para qualquer lugar onde as pessoas chegam num momento aleatório e ficam por um tempo indefinido. Ninguém começa a olhar uma vitrine no segundo zero, então uma história com começo e fim é o formato errado. Um loop não tem começo, e é exatamente essa a ideia.

| Lugar | Tamanho | Duração típica | Som |
| --- | --- | --- | --- |
| Topo do site | 1920×1080 | 10 a 30 segundos | Nunca |
| Tela de loja ou vitrine | 1920×1080 ou 1080×1920 | 20 a 30 segundos | Raramente |
| Reels ou stories do Instagram | 1080×1920 | 5 a 15 segundos | Opcional |
| Post no feed | 1080×1350 | 5 a 10 segundos | Opcional |
| Canvas do Spotify | 1080×1920 | 3 a 8 segundos | Vem da faixa |
| Tela offline da Twitch | 1920×1080 | 20 a 30 segundos | Opcional |

Pontos de partida, não regras. Os limites das plataformas mudam, então confira as orientações de cada uma antes de publicar.

Design de tela horizontal para a vitrine de um café com gradiente quente em movimento lento e um título parado

Um loop horizontal para a vitrine de um café. A cor se move; as palavras ficam paradas para serem lidas do outro lado da rua.

Tela de espera de live com a frase já voltamos sobre um gradiente calmo em loop

Uma tela de espera para uma live. Ela pode ficar dez minutos no ar, então o movimento precisa ser calmo.

Cada um desses lugares tem regras próprias de tamanho e som. [Vídeo de fundo em sites](https://gradiently.design/pt-br/guide/video-background-website) cobre o caso da web em detalhe, e [fundos de vídeo ambiente](https://gradiently.design/pt-br/guide/ambient-video) trata dos loops longos e calmos que rodam em telas e lives.

## O que faz um loop parecer infinito

Tecnicamente, um loop só precisa que o fim encontre o começo. Na percepção, precisa de mais. As pessoas notam repetição por pontos de referência: o momento em que uma mancha clara passa por um canto, o quadro em que uma forma entra, um brilho de granulado que sempre cai no mesmo lugar. Tire os pontos de referência e um clipe de doze segundos pode parecer durar horas.

- **Movimento contínuo.** Derivas, rotações e panorâmicas lentas que nunca param. Parar e recomeçar cria uma batida que o olho consegue contar.
- **Ciclos inteiros.** Tudo que se move completa um número inteiro de voltas ou passagens na duração do clipe, então termina exatamente onde começou.
- **Várias camadas em velocidades relacionadas.** Um fundo que dá uma volta e um brilho que dá duas disfarçam a repetição um do outro.
- **Nenhum evento isolado.** Nenhum flash, corte, vinheta de logo ou objeto que aparece uma vez. Se acontece uma vez, marca o recomeço.
- **Palavras paradas.** Um texto que entra animado vai entrar animado de novo a cada loop. Num vídeo em loop, deixe as palavras simplesmente estarem lá.

O detalhe quadro a quadro de uma emenda limpa, incluindo o último quadro duplicado que causa a maioria dos engasgos, está em [vídeo em loop perfeito](https://gradiently.design/pt-br/guide/seamless-loop-video).

## Qual deve ser a duração de um vídeo em loop

A duração depende da velocidade e de quanto tempo as pessoas vão olhar. Um loop que alguém vê de relance por três segundos pode ser curto. Um loop que roda numa parede a tarde inteira precisa ser longo o bastante, e lento o bastante, para que a repetição nunca fique óbvia. Clipes mais longos significam arquivos maiores, então equilibre as duas coisas.

| Movimento | Tempo de visualização | Duração do loop |
| --- | --- | --- |
| Animado, com movimento claro | Uma olhada | 5 a 10 segundos |
| Deriva constante | De alguns segundos a um minuto | 10 a 20 segundos |
| Muito lento, ambiente | Minutos ou horas | 20 a 30 segundos |

Quanto mais lento o movimento e mais tempo as pessoas olham, mais segundos o loop precisa antes que a repetição deixe de ser notada.

[Qual a duração ideal de um loop de vídeo](https://gradiently.design/pt-br/guide/video-loop-length) analisa essa escolha lugar por lugar, de olho no tamanho dos arquivos.

## Como fazer um vídeo em loop a partir de um design

1. **Comece pelo lugar onde ele vai rodar** Escolha o tamanho exato primeiro: 1920×1080 para uma tela horizontal ou o topo do site, 1080×1920 para stories, Reels e telas verticais, 1080×1350 para um post no feed.
2. **Escolha uma camada em movimento** Normalmente o fundo. Um gradiente ou material em movimento é ideal, porque não tem bordas que entreguem o loop.
3. **Mantenha as palavras paradas e calmas** Coloque o texto onde o fundo é mais tranquilo. Se precisar de animação, mantenha o movimento dentro do fundo.
4. **Ajuste a duração a ciclos inteiros** Garanta que cada movimento complete um número inteiro de ciclos no clipe, para que o último quadro flua para o primeiro.
5. **Exporte como vídeo e assista em loop** Exporte em MP4, ou WebM para a web, e assista em repetição no tamanho real por pelo menos um minuto. Corrija tudo que você notar duas vezes.

Fundo quente para o loop de um café: `radial-gradient(120% 90% at 30% 25%, #fde68a 0%, #f59e0b 30%, #b45309 60%, #3b1405 100%)`

Um loop funciona melhor sobre um fundo assim: cor suave e sem bordas, que pode derivar sem nunca mostrar uma emenda.

É aqui que o Gradiently entra. Todo Mark é um fundo vivo de gradiente e material que já se move, então, com o Pro, um design feito sobre ele é exportado como um loop perfeito de 5 a 30 segundos sem que você precise animar nada. Como não há dois Marks iguais, o loop da sua vitrine não vai ser o mesmo fundo de banco de imagens da loja ao lado.

## Como colocar um vídeo em loop num site

Os navegadores só reproduzem automaticamente vídeos sem som, e os celulares precisam de `playsinline` para manter o vídeo dentro da página. Acrescente uma imagem de pôster para que algo apareça antes do vídeo carregar, e ofereça primeiro o WebM, mais leve, com o 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>
```

Um vídeo em loop sem som, inline e com pôster. Quem pede menos movimento ao aparelho vê o primeiro quadro parado no lugar.

Essa última regra importa. Algumas pessoas acham o movimento constante perturbador ou fisicamente desconfortável, e o sistema operacional avisa isso ao navegador. [Prefers reduced motion](https://gradiently.design/pt-br/guide/reduced-motion) explica como respeitar essa preferência do jeito certo.

### Evite

- Um logo que entra animado no começo de cada loop
- Um salto visível onde o clipe recomeça
- Movimento rápido atrás de texto pequeno
- Um loop com som num site
- Um GIF onde um vídeo resolveria

### Faça

- Um logo parado sobre um fundo em movimento
- Ciclos inteiros, para que o fim encontre o começo
- Movimento lento com uma área calma para as palavras
- Sem som, inline, com imagem de pôster
- MP4 ou WebM, com o GIF guardado para o e-mail

## FAQ

### O que é um vídeo em loop?

Um vídeo curto feito para se repetir sem parar, com um fim que flui direto para o começo, para que o recomeço seja invisível. As marcas usam em sites, telas, posts nas redes e lives.

### Qual deve ser a duração de um vídeo em loop?

Loops animados podem ter de 5 a 10 segundos; loops de fundo constantes costumam ficar entre 10 e 20 segundos; loops lentos para telas vistas o dia todo se beneficiam de 20 a 30 segundos, para que a repetição seja mais difícil de notar.

### Qual o melhor formato para um vídeo em loop?

O MP4 roda em quase todo lugar e é a escolha segura para as redes sociais. Em sites, ofereça WebM primeiro e MP4 como alternativa. Guarde o GIF para o e-mail.

### Por que meu vídeo em loop dá um salto no final?

Normalmente o último quadro repete o primeiro, ou algo no clipe não completa um ciclo inteiro. Tire o quadro duplicado e faça cada movimento terminar onde começou.

### Um vídeo em loop pode ter texto?

Pode, mas mantenha o texto parado. Palavras que entram animadas vão entrar animadas de novo a cada loop, o que deixa o recomeço evidente.