# Looprande video: så gör varumärken klipp som aldrig verkar ta slut

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

En bra loop rullar i ett skyltfönster hela dagen, ligger bakom en rubrik på en webbplats eller snurrar under en låt, och ingen märker var den börjar. Så använder varumärken dem.

## The short version

- En looprande video är ett kort klipp som upprepas utan paus och är byggt så att skarven mellan slut och början inte syns.
- Varumärken använder looprande video i webbplatsens hero, på skärmar i butik, i sociala inlägg, som musikcanvas, på eventscener och som väntskärm i streamar.
- Ju långsammare en loop rör sig, desto längre bör den vara, eftersom långsam rörelse gör det lättare att upptäcka upprepningen.
- Loopar känns oändliga när ingenting i dem händer bara en gång: inget enskilt blixtljus, ingen klippning och inget föremål som markerar omstarten.
- På webbplatser bör en looprande video vara ljudlös, spelas inbäddat, ha en posterbild och respektera inställningen för minskad rörelse.

En **looprande video** är ett kort klipp som är byggt för att upprepas i evighet utan att någon ser var det startar om. För varumärken är det ett av de mest användbara formaten som finns: en enda fil kan rulla bakom rubriken på en webbplats, på en skärm vid kassan, under en låt på Spotify eller bakom en livestreams väntkort. Hantverket är enkelt att beskriva. Låt sista bildrutan leda rakt in i den första, håll rörelsen långsam och kontinuerlig och lägg aldrig in en engångshändelse i klippet, för allt som sker bara en gång blir ett tecken på omstarten.

## Var varumärken använder looprande video

Loopar passar överallt där människor dyker upp vid en slumpmässig tidpunkt och stannar en okänd tid. Ingen börjar titta på ett skyltfönster vid sekund noll, så en berättelse med början och slut har fel form. En loop har ingen början, och det är precis poängen.

| Plats | Storlek | Typisk längd | Ljud |
| --- | --- | --- | --- |
| Webbplatsens hero | 1920×1080 | 10 till 30 sekunder | Aldrig |
| Skärm i butik eller fönster | 1920×1080 eller 1080×1920 | 20 till 30 sekunder | Sällan |
| Instagram Reel eller story | 1080×1920 | 5 till 15 sekunder | Valfritt |
| Inlägg i flödet | 1080×1350 | 5 till 10 sekunder | Valfritt |
| Spotify canvas | 1080×1920 | 3 till 8 sekunder | Kommer från låten |
| Twitchs offlineskärm | 1920×1080 | 20 till 30 sekunder | Valfritt |

Utgångspunkter, inga regler. Plattformarnas gränser ändras, så kontrollera varje plattforms egna riktlinjer innan du publicerar.

Liggande skärmdesign för ett kafé med en långsamt rörlig varm gradient och en stillastående rubrik

En liggande loop för ett kafés fönster. Färgen rör sig, orden står stilla så att de går att läsa från andra sidan gatan.

Väntskärm för en stream med texten tillbaka efter pausen över en lugn looprande gradient

En väntskärm för en stream. Den kan rulla i tio minuter, så rörelsen måste vara lugn.

Varje sådan plats har sina egna regler för storlek och ljud. [Videobakgrunder på webbplatser](https://gradiently.design/sv/guide/video-background-website) går igenom webbfallet i detalj, och [ambient videobakgrund](https://gradiently.design/sv/guide/ambient-video) handlar om de långa, lugna looparna som rullar på skärmar och i streamar.

## Vad som får en loop att kännas oändlig

Tekniskt behöver en loop bara att slutet möter början. För ögat krävs mer. Människor märker upprepning genom hållpunkter: ögonblicket när en ljus fläck passerar ett hörn, bildrutan där en form kommer in, en kornflimmer som alltid hamnar på samma ställe. Ta bort hållpunkterna så kan ett tolv sekunder långt klipp kännas som om det pågår i timmar.

- **Kontinuerlig rörelse.** Drivande, roterande och långsamma panoreringar som aldrig stannar. Stopp och start skapar en takt som ögat kan räkna.
- **Hela varv.** Allt som rör sig fullbordar ett helt antal varv eller passager under klippets längd, så att det slutar exakt där det började.
- **Flera lager med besläktade hastigheter.** En bakgrund som går ett varv och ett ljussken som går två varv döljer varandras upprepning.
- **Inga engångshändelser.** Inget blixtljus, ingen klippning, ingen logotypsignal och inget föremål som dyker upp bara en gång. Om det sker en gång markerar det omstarten.
- **Stillastående ord.** Text som animeras in animeras in igen vid varje varv. I en looprande video ska orden helt enkelt bara finnas där.

Detaljerna på bildrutenivå för en ren skarv, inklusive den dubblerade sista bildrutan som orsakar de flesta hackningar, finns i [sömlös loopvideo](https://gradiently.design/sv/guide/seamless-loop-video).

## Hur lång ska en looprande video vara

Längden beror på farten och på hur länge människor tittar. En loop som någon ögnar på i tre sekunder kan vara kort. En loop som rullar på en vägg hela eftermiddagen måste vara tillräckligt lång och långsam för att upprepningen aldrig ska bli tydlig. Längre klipp ger större filer, så väg de två mot varandra.

| Rörelse | Tittartid | Looplängd |
| --- | --- | --- |
| Livlig, tydligt i rörelse | En blick | 5 till 10 sekunder |
| Jämn drift | Några sekunder till en minut | 10 till 20 sekunder |
| Mycket långsam, ambient | Minuter eller timmar | 20 till 30 sekunder |

Ju långsammare rörelse och ju längre människor tittar, desto fler sekunder behöver en loop innan upprepningen slutar märkas.

[Hur lång ska en videoloop vara](https://gradiently.design/sv/guide/video-loop-length) går igenom avvägningen plats för plats, med filstorlekar i åtanke.

## Så gör du en looprande video av en design

1. **Utgå från platsen där den ska spelas** Välj den exakta storleken först: 1920×1080 för en liggande skärm eller hero, 1080×1920 för stories, Reels och stående skärmar, 1080×1350 för ett inlägg i flödet.
2. **Välj ett rörligt lager** Oftast bakgrunden. En rörlig gradient eller ett rörligt material är idealiskt, eftersom det saknar kanter som kan avslöja loopen.
3. **Låt orden vara stilla och lugna** Placera texten där bakgrunden är som lugnast. Måste den animeras, håll rörelsen inne i bakgrunden i stället.
4. **Sätt längden till hela varv** Se till att varje rörelse fullbordar ett helt antal varv i klippet, så att sista bildrutan flyter över i den första.
5. **Exportera som video och titta på den i loop** Exportera MP4, eller WebM för webben, och spela den på repeat i full storlek i minst en minut. Rätta till det du lägger märke till två gånger.

Varm botten för en kafeloop: `radial-gradient(120% 90% at 30% 25%, #fde68a 0%, #f59e0b 30%, #b45309 60%, #3b1405 100%)`

En loop fungerar bäst på en bakgrund som den här: mjuk färg utan kanter som kan driva utan att någonsin visa en skarv.

Här passar Gradiently in. Varje Mark är en levande gradient och en materialbakgrund som redan rör sig, så med Pro exporteras en design byggd på den som en sömlös loop på 5 till 30 sekunder utan att du animerar något. Eftersom inga två Marks ser likadana ut blir loopen i ditt fönster inte samma stockbakgrund som hos butiken bredvid.

## Så lägger du en looprande video på en webbplats

Webbläsare spelar bara upp video automatiskt om den är ljudlös, och mobiler behöver `playsinline` för att hålla den kvar på sidan. Lägg till en posterbild så att något syns innan videon har laddats, och erbjud den mindre WebM-filen först med MP4 som reserv.

```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 ljudlös, inbäddad looprande video med poster. De som ber sin enhet om mindre rörelse får i stället den stilla första bildrutan.

Den sista regeln spelar roll. Vissa tycker att ständig rörelse är störande eller fysiskt obehaglig, och deras operativsystem talar om det för webbläsaren. [Minskad rörelse](https://gradiently.design/sv/guide/reduced-motion) förklarar hur du respekterar det på rätt sätt.

### Undvik

- En logotyp som animeras in i början av varje varv
- Ett synligt hopp där klippet startar om
- Snabb rörelse bakom liten text
- En loop med ljud på en webbplats
- En GIF där en video skulle räcka

### Gör så här

- En stilla logotyp över en rörlig bakgrund
- Hela varv, så att slutet möter början
- Långsam rörelse med en lugn yta för orden
- Ljudlös, inbäddad och med posterbild
- MP4 eller WebM, med GIF kvar för e-post

## FAQ

### Vad är en looprande video?

En kort video som är gjord för att upprepas utan paus, med ett slut som flyter rakt in i början så att omstarten inte syns. Varumärken använder dem på webbplatser, skärmar, i sociala inlägg och i streamar.

### Hur lång ska en looprande video vara?

Livliga loopar kan vara 5 till 10 sekunder, jämna bakgrundsloopar ligger oftast kring 10 till 20 sekunder, och långsamma loopar för skärmar som folk ser på hela dagen mår bra av 20 till 30 sekunder så att upprepningen är svårare att märka.

### Vilket format är bäst för en looprande video?

MP4 spelas nästan överallt och är det säkra valet för sociala plattformar. På webbplatser erbjuder du WebM först och MP4 som reserv. Spara GIF för e-post.

### Varför hoppar min looprande video i slutet?

Oftast upprepar sista bildrutan den första, eller så fullbordar något i klippet inte ett helt varv. Ta bort den dubbla bildrutan och se till att varje rörelse slutar där den började.

### Kan en looprande video ha text på sig?

Ja, men håll texten stilla. Ord som animeras in animeras in igen vid varje varv, vilket gör omstarten tydlig.