# Loopvideo's: zo maken merken clips die nooit lijken te eindigen

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

Een goede loop draait de hele dag in een etalage, ligt achter de kop van een website of draait onder een nummer, en niemand ziet waar hij begint. Zo zetten merken ze in.

## The short version

- Een loopvideo is een korte clip die continu herhaalt, ontworpen zodat de overgang tussen het einde en het begin onzichtbaar is.
- Merken gebruiken loopvideo's op website-heroes, schermen in winkels, socialposts, muziekcanvassen, evenementpodia en wachtschermen van streams.
- Hoe langzamer een loop beweegt, hoe langer hij moet zijn, omdat langzame beweging herhaling makkelijker zichtbaar maakt.
- Loops voelen eindeloos wanneer er niets in gebeurt dat maar één keer voorkomt: geen enkele flits, snede of object die de herstart markeert.
- Op websites hoort een loopvideo gedempt te zijn, inline af te spelen, een posterafbeelding te hebben en rekening te houden met instellingen voor verminderde beweging.

Een **loopvideo** is een korte clip die eindeloos herhaalt zonder dat iemand ziet waar hij opnieuw begint. Voor merken is het een van de nuttigste formaten die er zijn: één bestand kan draaien achter de kop van een website, op een scherm bij de kassa, onder een nummer op Spotify of achter de wachtkaart van een livestream. Het vak is simpel te omschrijven. Laat het laatste beeld rechtstreeks in het eerste overgaan, houd de beweging langzaam en continu en zet nooit een eenmalige gebeurtenis in de clip, want alles wat één keer gebeurt, wordt een markering van de herstart.

## Waar merken een loopvideo gebruiken

Loops passen overal waar mensen op een willekeurig moment aankomen en een onbekende tijd blijven. Niemand begint op seconde nul naar een etalage te kijken, dus een verhaal met een begin en een einde is de verkeerde vorm. Een loop heeft geen begin, en dat is precies de bedoeling.

| Plek | Formaat | Gebruikelijke lengte | Geluid |
| --- | --- | --- | --- |
| Website-hero | 1920×1080 | 10 tot 30 seconden | Nooit |
| Scherm in winkel of etalage | 1920×1080 of 1080×1920 | 20 tot 30 seconden | Zelden |
| Instagram-reel of -story | 1080×1920 | 5 tot 15 seconden | Optioneel |
| Feedpost | 1080×1350 | 5 tot 10 seconden | Optioneel |
| Spotify-canvas | 1080×1920 | 3 tot 8 seconden | Komt van het nummer |
| Twitch-offlinescherm | 1920×1080 | 20 tot 30 seconden | Optioneel |

Startpunten, geen regels. Platformlimieten veranderen, dus controleer de eigen richtlijnen van elk platform voordat je publiceert.

Liggend schermontwerp voor een café-etalage met een langzaam bewegend warm verloop en een stilstaande kop

Een liggende loop voor een café-etalage. De kleur beweegt; de woorden blijven staan, zodat ze van de overkant van de straat leesbaar zijn.

Wachtscherm voor een stream met de tekst Straks weer live, over een rustig lopend verloop

Een wachtscherm voor een stream. Het kan tien minuten draaien, dus de beweging moet rustig zijn.

Elk van deze plekken heeft eigen regels voor formaat en geluid. [Videoachtergronden op websites](https://gradiently.design/nl/guide/video-background-website) behandelt het webgeval in detail, en [ambient videoachtergronden](https://gradiently.design/nl/guide/ambient-video) gaat over de lange, rustige loops die op schermen en streams draaien.

## Wat een loop eindeloos laat voelen

Technisch hoeft een loop alleen dat zijn einde aansluit op zijn begin. Waarnemingstechnisch is er meer nodig. Mensen merken herhaling aan oriëntatiepunten: het moment dat een helder vlak een hoek passeert, het beeld waarin een vorm binnenkomt, een flikkering van korrel die altijd op dezelfde plek landt. Haal de oriëntatiepunten weg en een clip van twaalf seconden kan aanvoelen alsof hij uren duurt.

- **Continue beweging.** Drifts, rotaties en langzame pans die nooit stoppen. Stoppen en starten creëert een tel die het oog kan tellen.
- **Hele cycli.** Alles wat beweegt voltooit binnen de lengte van de clip een heel aantal omwentelingen of passages, zodat het precies eindigt waar het begon.
- **Meerdere lagen op verwante snelheden.** Een achtergrond die één keer rondgaat en een highlight die twee keer rondgaat, verhullen elkaars herhaling.
- **Geen eenmalige gebeurtenissen.** Geen flits, snede, logostinger of object dat één keer verschijnt. Gebeurt het één keer, dan markeert het de herstart.
- **Stilstaande woorden.** Tekst die in beeld animeert, animeert bij elke loop opnieuw in beeld. Laat de woorden in een loopvideo er gewoon zijn.

Het detail op beeldniveau van een schone overgang, inclusief het gedupliceerde laatste beeld dat de meeste haperingen veroorzaakt, staat in [naadloze loopvideo](https://gradiently.design/nl/guide/seamless-loop-video).

## Hoe lang moet een loopvideo zijn

De lengte hangt af van de snelheid en van hoe lang mensen kijken. Een loop waar iemand drie seconden naar kijkt, mag kort zijn. Een loop die de hele middag op een muur draait, moet lang genoeg en langzaam genoeg zijn dat de herhaling nooit opvalt. Langere clips betekenen grotere bestanden, dus weeg die twee af.

| Beweging | Kijktijd | Looplengte |
| --- | --- | --- |
| Levendig, duidelijk bewegend | Een blik | 5 tot 10 seconden |
| Gestage drift | Een paar seconden tot een minuut | 10 tot 20 seconden |
| Heel langzaam, ambient | Minuten of uren | 20 tot 30 seconden |

Hoe langzamer de beweging en hoe langer mensen kijken, hoe meer seconden een loop nodig heeft voordat zijn herhaling niet meer opvalt.

[Hoe lang moet een videoloop zijn](https://gradiently.design/nl/guide/video-loop-length) werkt deze afweging per plek uit, met bestandsgroottes in gedachten.

## Een loopvideo maken van een ontwerp

1. **Begin bij de plek waar hij gaat spelen** Kies eerst het exacte formaat: 1920×1080 voor een liggend scherm of hero, 1080×1920 voor stories, reels en staande schermen, 1080×1350 voor een feedpost.
2. **Kies één bewegende laag** Meestal de achtergrond. Een bewegend verloop of materiaal is ideaal, want het heeft geen randen die de loop verraden.
3. **Houd de woorden stil en rustig** Zet tekst waar de achtergrond het rustigst is. Moet het toch bewegen, laat de beweging dan in de achtergrond zitten.
4. **Zet de lengte op hele cycli** Zorg dat elke beweging een heel aantal cycli binnen de clip voltooit, zodat het laatste beeld in het eerste overloopt.
5. **Exporteer als video en kijk hoe hij loopt** Exporteer MP4, of WebM voor het web, en speel hem minstens een minuut op repeat af op volledig formaat. Herstel alles wat je twee keer opmerkt.

Warme ondergrond voor een café-loop: `radial-gradient(120% 90% at 30% 25%, #fde68a 0%, #f59e0b 30%, #b45309 60%, #3b1405 100%)`

Een loop werkt het best op een achtergrond als deze: zachte, randloze kleur die kan driften zonder ooit een naad te tonen.

Hier past Gradiently bij. Elke Mark is een levende verloop- en materiaalachtergrond die al beweegt, dus met Pro exporteer je een ontwerp erop als naadloze loop van 5 tot 30 seconden zonder dat je iets animeert. Omdat geen twee Marks op elkaar lijken, is de loop in jouw etalage niet dezelfde stockachtergrond als bij de winkel ernaast.

## Een loopvideo op een website zetten

Browsers spelen alleen gedempte video automatisch af, en telefoons hebben `playsinline` nodig om hem in de pagina te houden. Voeg een posterafbeelding toe, zodat er iets verschijnt voordat de video laadt, en bied de kleinere WebM eerst aan met MP4 als terugvaloptie.

```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>
```

Een gedempte, inline loopvideo met poster. Mensen die hun apparaat om minder beweging vragen, krijgen in plaats daarvan het stilstaande eerste beeld.

Die laatste regel is belangrijk. Sommige mensen vinden voortdurende beweging afleidend of lichamelijk onprettig, en hun besturingssysteem vertelt dat aan de browser. [Verminderde beweging](https://gradiently.design/nl/guide/reduced-motion) legt uit hoe je daar goed rekening mee houdt.

### Vermijd

- Een logo dat aan het begin van elke loop in beeld animeert
- Een zichtbare sprong waar de clip herstart
- Snelle beweging achter kleine tekst
- Een ongedempte loop op een website
- Een GIF waar een video volstaat

### Doe

- Een stilstaand logo over een bewegende achtergrond
- Hele cycli, zodat het einde op het begin aansluit
- Langzame beweging met een rustig vlak voor woorden
- Gedempt, inline, met een posterafbeelding
- MP4 of WebM, met GIF bewaard voor e-mail

## FAQ

### Wat is een loopvideo?

Een korte video die is ontworpen om continu te herhalen, met een einde dat rechtstreeks in het begin overgaat, zodat de herstart onzichtbaar is. Merken gebruiken ze op websites, schermen, socialposts en streams.

### Hoe lang moet een loopvideo zijn?

Levendige loops kunnen 5 tot 10 seconden duren; gestage achtergrondloops liggen meestal rond 10 tot 20 seconden; langzame loops voor schermen waar mensen de hele dag naar kijken, hebben baat bij 20 tot 30 seconden, zodat de herhaling moeilijker opvalt.

### Welk formaat is het beste voor een loopvideo?

MP4 speelt bijna overal en is de veilige keuze voor socialplatforms. Bied op websites eerst WebM aan en MP4 als terugvaloptie. Bewaar GIF voor e-mail.

### Waarom springt mijn loopvideo aan het eind?

Meestal herhaalt het laatste beeld het eerste, of voltooit iets in de clip geen heel aantal cycli. Verwijder het dubbele beeld en laat elke beweging eindigen waar hij begon.

### Mag er tekst op een loopvideo staan?

Ja, maar houd de tekst stil. Woorden die in beeld animeren, animeren bij elke loop opnieuw in beeld, waardoor de herstart opvalt.