# Looping video: sådan laver brands klip, der aldrig slutter

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

Et godt loop kører i en butiksrude hele dagen, ligger bag en overskrift på en hjemmeside eller drejer under en sang, uden at nogen lægger mærke til, hvor det starter. Sådan sætter brands dem i arbejde.

## The short version

- En looping video er et kort klip, der gentages uafbrudt og er lavet, så overgangen mellem slutning og start er usynlig.
- Brands bruger looping videoer på hjemmesiders hero-felter, på skærme i butikker, i opslag på sociale medier, som musikcanvas, på eventscener og som ventesider til streams.
- Jo langsommere et loop bevæger sig, jo længere bør det være, fordi langsom bevægelse gør gentagelsen lettere at opdage.
- Et loop føles uendeligt, når intet i det kun sker én gang: ingen enkelt blitz, ingen klipning og ingen genstand, der markerer genstarten.
- På hjemmesider bør en looping video være uden lyd, afspilles inline, have et plakatbillede og respektere indstillingen for reduceret bevægelse.

En **looping video** er et kort klip, der er bygget til at gentage sig for evigt, uden at nogen ser, hvor det starter forfra. For brands er det et af de mest nyttige formater: én fil kan køre bag en overskrift på en hjemmeside, på en skærm ved kassen, under en sang på Spotify eller bag et ventekort på en livestream. Håndværket er enkelt at beskrive. Lad det sidste billede føre direkte ind i det første, hold bevægelsen langsom og jævn, og læg aldrig en engangshændelse ind i klippet, for alt, der sker én gang, bliver et mærke for genstarten.

## Hvor brands bruger en looping video

Loops passer overalt, hvor folk dukker op på et tilfældigt tidspunkt og bliver i ukendt tid. Ingen begynder at se en butiksrude ved sekund nul, så en historie med begyndelse og slutning er den forkerte form. Et loop har ingen begyndelse, og det er netop pointen.

| Sted | Størrelse | Typisk længde | Lyd |
| --- | --- | --- | --- |
| Hero på hjemmeside | 1920×1080 | 10 til 30 sekunder | Aldrig |
| Skærm i butik eller vindue | 1920×1080 eller 1080×1920 | 20 til 30 sekunder | Sjældent |
| Instagram Reel eller story | 1080×1920 | 5 til 15 sekunder | Valgfri |
| Opslag i feedet | 1080×1350 | 5 til 10 sekunder | Valgfri |
| Spotify canvas | 1080×1920 | 3 til 8 sekunder | Kommer fra nummeret |
| Twitch offline-skærm | 1920×1080 | 20 til 30 sekunder | Valgfri |

Udgangspunkter, ikke regler. Platformenes grænser ændrer sig, så tjek hver platforms egen vejledning, før du udgiver.

Liggende skærmdesign til en cafés vindue med en langsomt bevægende varm gradient og en stillestående overskrift

Et liggende loop til en cafés vindue. Farven bevæger sig; ordene står stille, så de kan læses fra den anden side af gaden.

Venteskærm til en stream med teksten tilbage efter pausen over en rolig looping gradient

En venteskærm til en stream. Den kan køre i ti minutter, så bevægelsen skal være rolig.

Hvert af disse steder har sine egne regler for størrelse og lyd. [Videobaggrunde på hjemmesider](https://gradiently.design/da/guide/video-background-website) gennemgår webtilfældet i detaljer, og [ambient videobaggrunde](https://gradiently.design/da/guide/ambient-video) handler om de lange, rolige loops, der kører på skærme og streams.

## Hvad får et loop til at føles uendeligt

Teknisk set skal et loops slutning blot møde dets start. Opfattelsesmæssigt kræver det mere. Folk opdager gentagelse via pejlemærker: det øjeblik, en lys plet glider forbi et hjørne, det billede, hvor en form kommer ind, et glimt af korn, der altid lander det samme sted. Fjern pejlemærkerne, og et klip på tolv sekunder kan føles, som om det varer i timevis.

- **Jævn bevægelse.** Drift, rotation og langsomme panoreringer, der aldrig stopper. Stop og start skaber et slag, øjet kan tælle.
- **Hele cyklusser.** Alt, der bevæger sig, fuldfører et helt antal omdrejninger eller passager i klippets længde, så det ender præcis, hvor det begyndte.
- **Flere lag med beslægtede hastigheder.** En baggrund, der kører én gang rundt, og en highlight, der kører to gange, skjuler hinandens gentagelse.
- **Ingen enkeltstående hændelser.** Ingen blitz, klipning, logo-jingle eller genstand, der dukker op én gang. Sker det kun én gang, markerer det genstarten.
- **Stille ord.** Tekst, der animeres ind, animeres ind igen i hvert loop. I en looping video skal ordene bare være der.

Detaljerne på billedniveau i en ren overgang, herunder det duplikerede sidste billede, der forårsager de fleste hakker, står i [sømløs loopvideo](https://gradiently.design/da/guide/seamless-loop-video).

## Hvor lang bør en looping video være

Længden afhænger af hastigheden og af, hvor længe folk kigger. Et loop, som nogen kaster et blik på i tre sekunder, kan være kort. Et loop, der kører på en væg hele eftermiddagen, skal være langt nok og langsomt nok til, at gentagelsen aldrig bliver åbenlys. Længere klip giver større filer, så find en balance.

| Bevægelse | Visningstid | Looplængde |
| --- | --- | --- |
| Livlig, tydeligt i bevægelse | Et blik | 5 til 10 sekunder |
| Jævn drift | Nogle sekunder til et minut | 10 til 20 sekunder |
| Meget langsom, ambient | Minutter eller timer | 20 til 30 sekunder |

Jo langsommere bevægelsen er, og jo længere folk kigger, desto flere sekunder skal et loop have, før gentagelsen holder op med at blive bemærket.

[Hvor langt skal et videoloop være](https://gradiently.design/da/guide/video-loop-length) gennemgår denne afvejning sted for sted med filstørrelser for øje.

## Sådan laver du en looping video ud fra et design

1. **Start fra stedet, hvor det skal afspilles** Vælg den præcise størrelse først: 1920×1080 til en liggende skærm eller hero, 1080×1920 til stories, Reels og stående skærme, 1080×1350 til et opslag i feedet.
2. **Vælg ét bevægeligt lag** Som regel baggrunden. En bevægelig gradient eller et materiale er ideelt, fordi det ikke har kanter, der afslører loopet.
3. **Hold ordene stille og rolige** Placér teksten, hvor baggrunden er mest rolig. Skal den animeres, så hold bevægelsen inde i baggrunden.
4. **Sæt længden til hele cyklusser** Sørg for, at hver bevægelse fuldfører et helt antal cyklusser i klippet, så det sidste billede flyder ind i det første.
5. **Eksportér som video, og se det så loope** Eksportér MP4, eller WebM til nettet, og afspil det i gentagelse i fuld størrelse i mindst ét minut. Ret alt, du lægger mærke til to gange.

Varmt udgangspunkt til et cafeloop: `radial-gradient(120% 90% at 30% 25%, #fde68a 0%, #f59e0b 30%, #b45309 60%, #3b1405 100%)`

Et loop fungerer bedst på en baggrund som denne: blød farve uden kanter, der kan drive uden nogensinde at vise en sammensamling.

Her passer Gradiently ind. Hver Mark er en levende gradient og en materialebaggrund, der allerede bevæger sig, så med Pro eksporteres et design bygget på den som et sømløst loop på 5 til 30 sekunder, uden at du animerer noget. Fordi ingen to Marks ligner hinanden, bliver loopet i dit vindue ikke den samme standardbaggrund som hos butikken ved siden af.

## Sådan lægger du en looping video på en hjemmeside

Browsere afspiller kun video automatisk, hvis den er uden lyd, og telefoner kræver `playsinline` for at holde den inde på siden. Tilføj et plakatbillede, så der vises noget, før videoen er indlæst, og tilbyd den mindre WebM først med MP4 som reserve.

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

En looping video uden lyd og med inline-afspilning og plakatbillede. Folk, der beder deres enhed om mindre bevægelse, får det stillestående første billede i stedet.

Den sidste regel er vigtig. Nogle mennesker finder konstant bevægelse forstyrrende eller fysisk ubehagelig, og deres styresystem fortæller browseren det. [Foretrækker reduceret bevægelse](https://gradiently.design/da/guide/reduced-motion) forklarer, hvordan du respekterer det ordentligt.

### Undgå

- Et logo, der animeres ind i starten af hvert loop
- Et synligt spring, hvor klippet starter forfra
- Hurtig bevægelse bag lille tekst
- Et loop med lyd på en hjemmeside
- En GIF, hvor en video ville gøre det

### Gør

- Et stillestående logo over en bevægelig baggrund
- Hele cyklusser, så slutningen møder starten
- Langsom bevægelse med et roligt område til ordene
- Uden lyd, inline og med et plakatbillede
- MP4 eller WebM, med GIF forbeholdt e-mail

## FAQ

### Hvad er en looping video?

En kort video, der er lavet til at gentage sig uafbrudt, med en slutning, der flyder direkte ind i starten, så genstarten er usynlig. Brands bruger dem på hjemmesider, skærme, sociale opslag og streams.

### Hvor lang bør en looping video være?

Livlige loops kan være 5 til 10 sekunder; jævne baggrundsloops ligger som regel omkring 10 til 20 sekunder; langsomme loops til skærme, som folk ser på hele dagen, har gavn af 20 til 30 sekunder, så gentagelsen er sværere at opdage.

### Hvilket format er bedst til en looping video?

MP4 afspilles næsten overalt og er det sikre valg til sociale platforme. På hjemmesider bør du tilbyde WebM først og MP4 som reserve. Gem GIF til e-mail.

### Hvorfor hopper min looping video til sidst?

Som regel gentager det sidste billede det første, eller også fuldfører noget i klippet ikke en hel cyklus. Fjern det duplikerede billede, og sørg for, at hver bevægelse ender, hvor den startede.

### Kan en looping video have tekst på?

Ja, men hold teksten stille. Ord, der animeres ind, animeres ind igen i hvert loop, og det gør genstarten tydelig.