# Loopvideo: slik lager merkevarer klipp som aldri tar slutt

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

En god loop går i et butikkvindu hele dagen, ligger bak en overskrift på nettsiden eller snurrer under en låt, og ingen merker hvor den starter. Slik tar merkevarer den i bruk.

## The short version

- En loopvideo er et kort klipp som gjentas kontinuerlig, laget slik at skjøten mellom slutten og starten er usynlig.
- Merkevarer bruker loopvideoer i nettsidetopper, på skjermer i butikk, i sosiale innlegg, som musikk-canvas, på eventscener og som venteskjerm i strømmer.
- Jo saktere en loop beveger seg, desto lengre bør den være, fordi langsom bevegelse gjør gjentakelsen lettere å oppdage.
- En loop føles endeløs når ingenting i den skjer bare én gang: ingen enkelt blink, kutt eller gjenstand som markerer omstarten.
- På nettsider bør en loopvideo være dempet, spilles inne på siden, ha et plakatbilde og respektere innstillinger for redusert bevegelse.

En **loopvideo** er et kort klipp laget for å gjentas i det uendelige uten at noen ser hvor det starter på nytt. For merkevarer er det et av de mest nyttige formatene som finnes: én fil kan gå bak en overskrift på nettsiden, på en skjerm ved kassen, under en låt på Spotify eller bak ventekortet i en direktesending. Håndverket er enkelt å beskrive. La det siste bildet gå rett over i det første, hold bevegelsen langsom og sammenhengende, og legg aldri en engangshendelse i klippet, for alt som skjer én gang, blir et merke for omstarten.

## Hvor merkevarer bruker en loopvideo

Looper passer overalt der folk kommer til et tilfeldig tidspunkt og blir værende en ukjent tid. Ingen begynner å se på et butikkvindu ved sekund null, så en historie med begynnelse og slutt har feil form. En loop har ingen begynnelse, og det er nettopp poenget.

| Sted | Størrelse | Vanlig lengde | Lyd |
| --- | --- | --- | --- |
| Toppen av nettsiden | 1920×1080 | 10 til 30 sekunder | Aldri |
| Skjerm i butikk eller vindu | 1920×1080 eller 1080×1920 | 20 til 30 sekunder | Sjelden |
| Instagram Reel eller story | 1080×1920 | 5 til 15 sekunder | Valgfritt |
| Feedinnlegg | 1080×1350 | 5 til 10 sekunder | Valgfritt |
| Spotify-canvas | 1080×1920 | 3 til 8 sekunder | Kommer fra låten |
| Twitch offline-skjerm | 1920×1080 | 20 til 30 sekunder | Valgfritt |

Utgangspunkter, ikke regler. Plattformenes grenser endrer seg, så sjekk hver plattforms egne retningslinjer før du publiserer.

Liggende skjermdesign til et kafévindu med en langsomt bevegelig varm gradient og en stillestående overskrift

En liggende loop til vinduet på en kafé. Fargen beveger seg; ordene står stille, så de kan leses fra andre siden av gata.

Venteskjerm for en strøm med teksten tilbake etter pausen, over en rolig loopende gradient

En venteskjerm til en strøm. Den kan gå i ti minutter, så bevegelsen må være rolig.

Hvert av disse stedene har egne regler for størrelse og lyd. [Videobakgrunner på nettsider](https://gradiently.design/nb/guide/video-background-website) dekker nettet i detalj, og [ambient videobakgrunner](https://gradiently.design/nb/guide/ambient-video) tar for seg de lange, rolige loopene som går på skjermer og i strømmer.

## Hva som får en loop til å føles endeløs

Teknisk trenger en loop bare at slutten møter starten. For øyet trengs mer. Folk legger merke til gjentakelse gjennom landemerker: øyeblikket en lys flekk passerer et hjørne, bildet der en form kommer inn, et korn som alltid havner på samme sted. Fjern landemerkene, og et klipp på tolv sekunder kan føles som om det varer i timevis.

- **Sammenhengende bevegelse.** Drift, rotasjon og langsomme panoreringer som aldri stopper. Stopp og start skaper en takt øyet kan telle.
- **Hele sykluser.** Alt som beveger seg, fullfører et helt antall runder eller passeringer i løpet av klippet, så det slutter nøyaktig der det begynte.
- **Flere lag i beslektet tempo.** En bakgrunn som går én syklus og et høylys som går to, skjuler hverandres gjentakelse.
- **Ingen enkelthendelser.** Ingen blink, kutt, logo-sting eller gjenstand som dukker opp én gang. Skjer det én gang, markerer det omstarten.
- **Stillestående ord.** Tekst som animeres inn, animeres inn igjen i hver loop. I en loopvideo bør ordene bare være der.

Detaljene på bildenivå i en ren skjøt, blant annet det dupliserte siste bildet som står bak de fleste hakkene, finner du i [sømløs loopvideo](https://gradiently.design/nb/guide/seamless-loop-video).

## Hvor lang bør en loopvideo være

Lengden avhenger av tempo og av hvor lenge folk ser. En loop noen kaster et blikk på i tre sekunder, kan være kort. En loop som går på en vegg hele ettermiddagen, må være lang nok, og langsom nok, til at gjentakelsen aldri blir åpenbar. Lengre klipp gir større filer, så finn balansen mellom de to.

| Bevegelse | Visningstid | Looplengde |
| --- | --- | --- |
| Livlig, tydelig bevegelse | Et blikk | 5 til 10 sekunder |
| Jevn drift | Noen sekunder til et minutt | 10 til 20 sekunder |
| Svært langsom, ambient | Minutter eller timer | 20 til 30 sekunder |

Jo langsommere bevegelsen er og jo lenger folk ser, desto flere sekunder trenger en loop før gjentakelsen slutter å synes.

[Hvor lang bør en videoloop være](https://gradiently.design/nb/guide/video-loop-length) går gjennom denne avveiningen plassering for plassering, med filstørrelser i tankene.

## Slik lager du en loopvideo ut fra et design

1. **Start med stedet den skal spilles** Velg nøyaktig størrelse først: 1920×1080 for en liggende skjerm eller nettsidetopp, 1080×1920 for stories, Reels og stående skjermer, 1080×1350 for et feedinnlegg.
2. **Velg ett lag som beveger seg** Som regel bakgrunnen. En bevegelig gradient eller et materiale er ideelt, fordi det ikke har kanter som avslører loopen.
3. **Hold ordene stille og rolige** Plasser teksten der bakgrunnen er roligst. Må noe animeres, legg heller bevegelsen i bakgrunnen.
4. **Sett lengden til hele sykluser** Sørg for at hver bevegelse fullfører et helt antall sykluser i klippet, så det siste bildet flyter over i det første.
5. **Eksporter som video, og se den loope** Eksporter MP4, eller WebM til nettet, og spill den på repeat i full størrelse i minst ett minutt. Rett opp alt du legger merke til to ganger.

Varm bunn til en kafé-loop: `radial-gradient(120% 90% at 30% 25%, #fde68a 0%, #f59e0b 30%, #b45309 60%, #3b1405 100%)`

En loop fungerer best på en bakgrunn som denne: myk, kantløs farge som kan drive uten å vise en søm.

Det er her Gradiently passer inn. Hver Mark er en levende gradient- og materialbakgrunn som allerede beveger seg, så med Pro eksporteres et design bygd på den som en sømløs loop på 5 til 30 sekunder uten at du animerer noe. Fordi ingen Marks ser like ut, blir ikke loopen i vinduet ditt den samme standardbakgrunnen som butikken ved siden av har.

## Slik legger du en loopvideo på en nettside

Nettlesere spiller bare av video automatisk når den er dempet, og telefoner trenger `playsinline` for å holde den inne på siden. Legg til et plakatbilde så noe vises før videoen laster, og tilby den mindre WebM-filen 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 dempet loopvideo som spilles inne på siden, med plakatbilde. Den som ber enheten sin om mindre bevegelse, får det stillestående første bildet i stedet.

Den siste regelen betyr noe. Noen opplever konstant bevegelse som distraherende eller fysisk ubehagelig, og operativsystemet deres sier fra til nettleseren. [Prefers reduced motion](https://gradiently.design/nb/guide/reduced-motion) forklarer hvordan du respekterer det på riktig måte.

### Unngå

- En logo som animeres inn i starten av hver loop
- Et synlig hopp der klippet starter på nytt
- Rask bevegelse bak liten tekst
- En loop med lyd på en nettside
- En GIF der en video ville holdt

### Gjør

- En stillestående logo over en bevegelig bakgrunn
- Hele sykluser, så slutten møter starten
- Langsom bevegelse med et rolig område til ord
- Dempet, inne på siden, med plakatbilde
- MP4 eller WebM, og GIF bare til e-post

## FAQ

### Hva er en loopvideo?

En kort video laget for å gjentas kontinuerlig, med en slutt som flyter rett over i starten så omstarten er usynlig. Merkevarer bruker dem på nettsider, skjermer, sosiale innlegg og strømmer.

### Hvor lang bør en loopvideo være?

Livlige looper kan være 5 til 10 sekunder; jevne bakgrunnslooper ligger som regel rundt 10 til 20 sekunder; langsomme looper til skjermer folk ser på hele dagen, har godt av 20 til 30 sekunder så gjentakelsen blir vanskeligere å legge merke til.

### Hvilket format er best for en loopvideo?

MP4 spilles nesten overalt og er det trygge valget for sosiale plattformer. På nettsider tilbyr du WebM først og MP4 som reserve. Hold GIF til e-post.

### Hvorfor hopper loopvideoen min på slutten?

Som regel gjentar det siste bildet det første, eller noe i klippet fullfører ikke en hel syklus. Fjern det dupliserte bildet og la hver bevegelse slutte der den begynte.

### Kan en loopvideo ha tekst på seg?

Ja, men hold teksten stille. Ord som animeres inn, animeres inn igjen i hver loop, og det gjør omstarten åpenbar.
