# Toistuva video: näin brändi tekee loputtomalta näyttävän klipin

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

Hyvä videosilmukka pyörii näyteikkunassa koko päivän, verkkosivun otsikon takana tai kappaleen rinnalla ilman havaittavaa alkua. Näin brändit käyttävät sitä.

## The short version

- Toistuva video on lyhyt, jatkuvasti pyörivä klippi, jonka lopun ja alun liitos on suunniteltu näkymättömäksi.
- Brändit käyttävät toistuvia videoita verkkosivujen pääkuvissa, myymälänäytöillä, somejulkaisuissa, musiikin taustoina, tapahtumalavoilla ja lähetysten odotusruuduissa.
- Mitä hitaammin silmukka liikkuu, sitä pidempi sen kannattaa olla, sillä hidas liike tekee toiston helpommin havaittavaksi.
- Silmukka tuntuu loputtomalta, kun siinä ei ole yksittäistä välähdystä, leikkausta tai esinettä, joka paljastaa uudelleenkäynnistymisen.
- Verkkosivulla toistuvan videon tulee olla mykistetty, pysyä sivun sisällä, sisältää esikatselukuva ja kunnioittaa vähennetyn liikkeen asetusta.

**Toistuva video** on lyhyt klippi, joka jatkuu loputtomasti ilman näkyvää uudelleenkäynnistymistä. Se on brändille hyvin hyödyllinen formaatti: sama tiedosto voi pyöriä verkkosivun otsikon takana, kassalla olevalla näytöllä, Spotify-kappaleen rinnalla tai suoran lähetyksen odotusruudussa. Periaate on helppo selittää. Liitä viimeinen ruutu suoraan ensimmäiseen, pidä liike hitaana ja jatkuvana ja vältä yksittäisiä tapahtumia. Kaikki vain kerran tapahtuva paljastaa silmukan alun.

## Missä brändit käyttävät toistuvia videoita

Silmukka sopii paikkoihin, joissa katsoja saapuu sattumanvaraisena hetkenä ja viipyy ennalta tuntemattoman ajan. Kukaan ei ala katsella näyteikkunaa täsmälleen nollasekunnilla, joten alun ja lopun sisältävä tarina sopii siihen huonosti. Silmukalla ei ole alkua, ja juuri se on sen tarkoitus.

| Käyttökohde | Koko | Tyypillinen kesto | Ääni |
| --- | --- | --- | --- |
| Verkkosivun pääkuva | 1920×1080 | 10-30 sekuntia | Ei koskaan |
| Myymälä- tai ikkunanäyttö | 1920×1080 tai 1080×1920 | 20-30 sekuntia | Harvoin |
| Instagram Reel tai tarina | 1080×1920 | 5-15 sekuntia | Valinnainen |
| Syötejulkaisu | 1080×1350 | 5-10 sekuntia | Valinnainen |
| Spotify Canvas | 1080×1920 | 3-8 sekuntia | Tulee kappaleesta |
| Twitchin poissaoloruutu | 1920×1080 | 20-30 sekuntia | Valinnainen |

Nämä ovat lähtökohtia, eivät sääntöjä. Alustojen rajoitukset muuttuvat, joten tarkista kunkin alustan omat ohjeet ennen julkaisua.

Kahvilan ikkunan vaakasuuntainen näyttö, jossa lämmin liukuväri liikkuu hitaasti ja otsikko pysyy paikoillaan

Vaakasuuntainen silmukka kahvilan ikkunaan. Värit liikkuvat, mutta teksti pysyy paikoillaan ja erottuu kadun toiselta puolelta.

Lähetyksen odotusruutu, jossa lukee palaamme tauon jälkeen rauhallisesti toistuvan liukuvärin päällä

Lähetyksen odotusruutu. Se voi pyöriä kymmenen minuuttia, joten liikkeen täytyy olla rauhallista.

Jokaisella käyttökohteella on omat koko- ja äänivaatimuksensa. [Verkkosivujen videotaustat](https://gradiently.design/fi/guide/video-background-website) käsittelee verkkokäyttöä tarkasti, ja [rauhalliset videotaustat](https://gradiently.design/fi/guide/ambient-video) neuvoo pitkien silmukoiden käytössä näytöillä ja lähetyksissä.

## Mikä saa silmukan tuntumaan loputtomalta

Teknisesti silmukka tarvitsee vain lopun, joka sopii alkuun. Katsojan näkökulmasta tarvitaan enemmän. Toisto näkyy maamerkeissä: kirkas kohta ohittaa kulman, muoto tulee kuvaan tai rakeisuus välähtää aina samassa kohdassa. Poista nämä tunnistettavat hetket, ja kahdentoista sekunnin klippi voi tuntua jatkuvan tuntikausia.

- **Jatkuva liike.** Lipuminen, pyöriminen ja hidas panorointi eivät pysähdy. Pysähtely luo rytmin, jonka silmä voi laskea.
- **Täydet kierrot.** Jokainen liikkuva asia tekee klipin aikana kokonaisen määrän kierroksia tai kulkuja ja päätyy täsmälleen lähtökohtaansa.
- **Useita kerroksia toisiinsa suhteutetuilla nopeuksilla.** Kerran kiertävä tausta ja kahdesti kiertävä valokohta peittävät toistensa toistuvuuden.
- **Ei yksittäisiä tapahtumia.** Vältä välähdystä, leikkausta, logotehostetta tai kerran ilmestyvää esinettä. Kerran tapahtuva paljastaa alun.
- **Paikoillaan pysyvä teksti.** Kuvaan animoitu teksti ilmestyy uudelleen jokaisella kierroksella. Anna sanojen vain olla mukana.

Saumattoman liitoksen ruutukohtaiset yksityiskohdat, myös useimmat nykäykset aiheuttava kahdentunut viimeinen ruutu, selitetään oppaassa [saumaton videosilmukka](https://gradiently.design/fi/guide/seamless-loop-video).

## Toistuvan videon sopiva pituus

Kesto riippuu nopeudesta ja katseluajasta. Kolmen sekunnin vilkaisua varten silmukka voi olla lyhyt. Koko iltapäivän seinällä pyörivän silmukan täytyy olla riittävän pitkä ja hidas, jotta toisto ei käy ilmeiseksi. Pidempi klippi kasvattaa tiedostoa, joten tasapainota nämä tekijät.

| Liike | Katseluaika | Silmukan kesto |
| --- | --- | --- |
| Vilkas, selvästi liikkuva | Vilkaisu | 5-10 sekuntia |
| Tasainen lipuminen | Muutamasta sekunnista minuuttiin | 10-20 sekuntia |
| Hyvin hidas, rauhallinen | Minuutteja tai tunteja | 20-30 sekuntia |

Mitä hitaampi liike ja pidempi katseluaika, sitä enemmän sekunteja tarvitaan, jotta toisto ei erotu.

[Videosilmukan sopiva pituus](https://gradiently.design/fi/guide/video-loop-length) käy tämän tasapainon läpi käyttökohteittain tiedostokoot huomioiden.

## Näin teet suunnitelmasta toistuvan videon

1. **Aloita esityspaikasta** Valitse tarkka koko ensin: 1920×1080 vaakanäytölle tai pääkuvaan, 1080×1920 tarinoihin, Reelseihin ja pystynäytöille sekä 1080×1350 syötejulkaisuun.
2. **Valitse yksi liikkuva kerros** Yleensä se on tausta. Liikkuva liukuväri tai materiaali sopii hyvin, koska siinä ei ole silmukan paljastavia reunoja.
3. **Pidä teksti paikoillaan ja rauhallisena** Sijoita teksti taustan rauhallisimpaan kohtaan. Jos kaipaat animaatiota, jätä liike taustaan.
4. **Sovita kestoon täydet kierrot** Varmista, että jokainen liike tekee klipissä kokonaisen määrän kiertoja, jolloin viimeinen ruutu jatkuu ensimmäiseen.
5. **Vie videoksi ja katso toistoa** Vie MP4 tai verkkokäyttöön WebM ja katso sitä täysikokoisena toistolla vähintään minuutti. Korjaa kaikki, minkä huomaat kahdesti.

Lämmin pohja kahvilan silmukalle: `radial-gradient(120% 90% at 30% 25%, #fde68a 0%, #f59e0b 30%, #b45309 60%, #3b1405 100%)`

Silmukka toimii parhaiten tällaisella taustalla: pehmeä, reunaton väri voi lipua paljastamatta saumaa.

Tähän Gradiently sopii. Jokainen Mark on elävä liukuväri- ja materiaalitausta, joka liikkuu valmiiksi. Prolla siihen tehty suunnitelma viedään saumattomaksi 5-30 sekunnin silmukaksi ilman omaa animointia. Koska kaksi Markia ei näytä samalta, ikkunasi silmukka ei ole sama kuvapankkitausta kuin naapuriliikkeessä.

## Toistuvan videon lisääminen verkkosivulle

Selain käynnistää automaattisesti vain mykistetyn videon, ja puhelimessa `playsinline` pitää sen sivun sisällä. Lisää esikatselukuva, jotta sivulla näkyy jotakin ennen videon latautumista. Tarjoa pienempi WebM ensin ja MP4 varavaihtoehtona.

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

Mykistetty, sivun sisällä toistuva video esikatselukuvalla. Laitteensa liikkeen vähentämistä pyytäneet näkevät sen sijaan ensimmäisen ruudun still-kuvana.

Viimeinen sääntö on tärkeä. Jatkuva liike häiritsee joitakin tai tuntuu fyysisesti epämukavalta, ja käyttöjärjestelmä välittää toiveen selaimelle. [Vähennetty liike](https://gradiently.design/fi/guide/reduced-motion) selittää, miten huomioit asetuksen oikein.

### Vältä

- Jokaisen kierroksen alussa kuvaan animoituvaa logoa
- Näkyvää hyppyä klipin alkaessa uudelleen
- Nopeaa liikettä pienen tekstin takana
- Äänellistä silmukkaa verkkosivulla
- GIF-tiedostoa, kun video riittäisi

### Tee näin

- Paikallaan pysyvä logo liikkuvan taustan päällä
- Täydet kierrot, jolloin loppu sopii alkuun
- Hidas liike ja rauhallinen alue tekstille
- Mykistetty video sivun sisällä esikatselukuvalla
- MP4 tai WebM, GIF sähköpostiin

## FAQ

### Mikä on toistuva video?

Lyhyt video, joka toistuu jatkuvasti ja jonka loppu jatkuu suoraan alkuun ilman näkyvää uudelleenkäynnistymistä. Brändit käyttävät niitä verkkosivuilla, näytöillä, somejulkaisuissa ja lähetyksissä.

### Kuinka pitkä toistuvan videon pitäisi olla?

Vilkas silmukka voi kestää 5-10 sekuntia, tasainen taustasilmukka yleensä 10-20 sekuntia. Koko päivän katseltava hidas silmukka hyötyy 20-30 sekunnista, jolloin toisto erottuu heikommin.

### Mikä tiedostomuoto sopii parhaiten toistuvaan videoon?

MP4 toimii lähes kaikkialla ja sopii turvalliseksi valinnaksi somealustoille. Verkkosivulla tarjoa ensin WebM ja MP4 varalle. Jätä GIF sähköpostiin.

### Miksi toistuva videoni nykäisee lopussa?

Yleensä viimeinen ruutu toistaa ensimmäisen tai jokin liike ei tee täyttä kierrosta. Poista kahdentunut ruutu ja päätä jokainen liike lähtökohtaansa.

### Voiko toistuvassa videossa olla tekstiä?

Kyllä, mutta pidä se paikoillaan. Kuvaan animoituvat sanat ilmestyvät uudelleen joka kierroksella ja paljastavat alun.