# Vidéo en boucle : des clips de marque qui semblent ne jamais finir
[Canonical HTML page](https://gradiently.design/fr/guide/looping-video-background)
Une bonne boucle tourne toute la journée en vitrine, se glisse derrière le titre d’un site ou accompagne une chanson, et personne ne remarque où elle commence. Voici comment les marques la mettent au travail.
## The short version
- Une vidéo en boucle est un clip court qui se répète en continu, conçu pour que la jonction entre sa fin et son début soit invisible.
- Les marques utilisent des vidéos en boucle en tête de site web, sur les écrans en boutique, dans les posts sociaux, les canvas musicaux, sur scène et sur les écrans d’attente de stream.
- Plus une boucle bouge lentement, plus elle doit être longue, car un mouvement lent rend la répétition plus facile à repérer.
- Une boucle paraît sans fin quand rien n’y arrive une seule fois : aucun flash, aucune coupe, aucun objet unique qui signale le redémarrage.
- Sur un site web, une vidéo en boucle doit être muette, lue dans la page, avoir une image de poster et respecter le réglage de réduction des animations.
Une **vidéo en boucle** est un clip court conçu pour se répéter à l’infini sans que personne ne voie où il redémarre. Pour une marque, c’est l’un des formats les plus utiles qui soient : un seul fichier peut tourner derrière le titre d’un site, sur un écran près de la caisse, sous une chanson sur Spotify ou derrière l’écran d’attente d’un live. Le principe tient en peu de mots. Faites en sorte que la dernière image mène directement à la première, gardez un mouvement lent et continu, et ne placez jamais d’événement unique dans le clip, car tout ce qui arrive une seule fois devient un repère du redémarrage.
## Où les marques utilisent une vidéo en boucle
Les boucles conviennent à tous les endroits où l’on arrive à un moment quelconque et où l’on reste pour une durée inconnue. Personne ne commence à regarder une vitrine à la seconde zéro : une histoire avec un début et une fin n’a donc pas la bonne forme. Une boucle n’a pas de début, et c’est exactement le but.
| Lieu | Format | Durée type | Son |
| --- | --- | --- | --- |
| En-tête de site web | 1920×1080 | 10 à 30 secondes | Jamais |
| Écran en boutique ou en vitrine | 1920×1080 ou 1080×1920 | 20 à 30 secondes | Rarement |
| Reel ou story Instagram | 1080×1920 | 5 à 15 secondes | Facultatif |
| Post dans le fil | 1080×1350 | 5 à 10 secondes | Facultatif |
| Canvas Spotify | 1080×1920 | 3 à 8 secondes | Vient du morceau |
| Écran hors ligne Twitch | 1920×1080 | 20 à 30 secondes | Facultatif |
Des points de départ, pas des règles. Les limites des plateformes changent : vérifiez les consignes de chacune avant de publier.
Visuel paysage pour la vitrine d’un café avec un dégradé chaud qui bouge lentement et un titre immobile
Une boucle en paysage pour la vitrine d’un café. La couleur bouge ; les mots restent fixes pour se lire depuis l’autre trottoir.
Écran d’attente de stream annonçant le retour après la pause, sur un dégradé calme en boucle
Un écran d’attente pour un stream. Il peut tourner dix minutes, le mouvement doit donc rester calme.
Chacun de ces lieux a ses propres règles de format et de son. [Les fonds vidéo sur un site web](https://gradiently.design/fr/guide/video-background-website) détaillent le cas du web, et [les fonds vidéo d’ambiance](https://gradiently.design/fr/guide/ambient-video) traitent des boucles longues et calmes qui tournent sur les écrans et les streams.
## Ce qui rend une boucle sans fin
Techniquement, une boucle doit seulement faire coïncider sa fin et son début. Pour l’œil, il en faut davantage. On remarque la répétition grâce à des repères : le moment où une tache claire passe dans un coin, l’image où une forme entre, un scintillement de grain qui tombe toujours au même endroit. Supprimez les repères et un clip de douze secondes peut sembler durer des heures.
- **Un mouvement continu.** Dérives, rotations et panoramiques lents qui ne s’arrêtent jamais. S’arrêter et repartir crée un temps que l’œil peut compter.
- **Des cycles entiers.** Tout ce qui bouge accomplit un nombre entier de tours ou de passages sur la durée du clip, pour finir exactement là où il a commencé.
- **Plusieurs couches à des vitesses liées.** Un fond qui fait un cycle et un reflet qui en fait deux masquent mutuellement leur répétition.
- **Aucun événement unique.** Pas de flash, de coupe, de logo animé ni d’objet qui apparaît une fois. Ce qui arrive une fois marque le redémarrage.
- **Des mots immobiles.** Un texte qui apparaît en animation réapparaîtra à chaque boucle. Dans une vidéo en boucle, laissez simplement les mots en place.
Le détail image par image d’une jonction propre, y compris la dernière image dupliquée qui cause la plupart des saccades, se trouve dans [la vidéo en boucle parfaite](https://gradiently.design/fr/guide/seamless-loop-video).
## Quelle durée pour une vidéo en boucle
La durée dépend de la vitesse et du temps pendant lequel on regarde. Une boucle aperçue trois secondes peut être courte. Une boucle qui tourne sur un mur tout l’après-midi doit être assez longue, et assez lente, pour que la répétition ne devienne jamais évidente. Un clip plus long pèse plus lourd : trouvez l’équilibre entre les deux.
| Mouvement | Temps de regard | Durée de la boucle |
| --- | --- | --- |
| Vif, nettement en mouvement | Un coup d’œil | 5 à 10 secondes |
| Dérive régulière | Quelques secondes à une minute | 10 à 20 secondes |
| Très lent, d’ambiance | Des minutes ou des heures | 20 à 30 secondes |
Plus le mouvement est lent et plus on regarde longtemps, plus une boucle a besoin de secondes pour que sa répétition passe inaperçue.
[Quelle durée pour une boucle vidéo](https://gradiently.design/fr/guide/video-loop-length) examine ce compromis emplacement par emplacement, en tenant compte du poids des fichiers.
## Comment faire une vidéo en boucle à partir d’un design
1. **Partez de l’endroit où elle sera diffusée** Choisissez d’abord le format exact : 1920×1080 pour un écran paysage ou un en-tête, 1080×1920 pour les stories, les Reels et les écrans verticaux, 1080×1350 pour un post dans le fil.
2. **Choisissez une seule couche en mouvement** En général le fond. Un dégradé ou une matière en mouvement est idéal, car il n’a aucun bord qui trahisse la boucle.
3. **Gardez les mots fixes et calmes** Placez le texte là où le fond est le plus calme. S’il faut de l’animation, gardez-la plutôt dans le fond.
4. **Calez la durée sur des cycles entiers** Vérifiez que chaque mouvement accomplit un nombre entier de cycles dans le clip, pour que la dernière image s’enchaîne avec la première.
5. **Exportez en vidéo, puis regardez-la boucler** Exportez en MP4, ou en WebM pour le web, et lisez-la en boucle en plein écran pendant au moins une minute. Corrigez tout ce que vous remarquez deux fois.
Fond chaud pour la boucle d’un café: `radial-gradient(120% 90% at 30% 25%, #fde68a 0%, #f59e0b 30%, #b45309 60%, #3b1405 100%)`
Une boucle fonctionne mieux sur un fond comme celui-ci : une couleur douce, sans bords, qui peut dériver sans jamais montrer de raccord.
C’est là que Gradiently trouve sa place. Chaque Mark est un fond vivant de dégradé et de matière qui bouge déjà : avec Pro, un design construit dessus s’exporte en boucle parfaite de 5 à 30 secondes sans que vous animiez quoi que ce soit. Et comme deux Marks ne se ressemblent jamais, la boucle de votre vitrine ne sera pas le même fond de banque d’images que celle de la boutique d’à côté.
## Mettre une vidéo en boucle sur un site web
Les navigateurs ne lancent automatiquement que les vidéos muettes, et les téléphones ont besoin de `playsinline` pour la garder dans la page. Ajoutez une image de poster pour que quelque chose s’affiche avant le chargement, et proposez d’abord le WebM, plus léger, avec le MP4 en solution de repli.
```html
```
Une vidéo en boucle muette, lue dans la page, avec un poster. Les personnes qui demandent moins d’animation à leur appareil voient à la place la première image fixe.
Cette dernière règle compte. Certaines personnes trouvent le mouvement constant gênant, voire physiquement inconfortable, et leur système d’exploitation l’indique au navigateur. [Prefers reduced motion](https://gradiently.design/fr/guide/reduced-motion) explique comment le respecter correctement.
### À éviter
- Un logo qui s’anime au début de chaque boucle
- Un saut visible quand le clip redémarre
- Un mouvement rapide derrière un petit texte
- Une boucle avec le son sur un site web
- Un GIF là où une vidéo suffirait
### À faire
- Un logo fixe sur un fond en mouvement
- Des cycles entiers, pour que la fin rejoigne le début
- Un mouvement lent avec une zone calme pour les mots
- Muette, lue dans la page, avec une image de poster
- MP4 ou WebM, le GIF étant réservé à l’e-mail
## FAQ
### Qu’est-ce qu’une vidéo en boucle ?
Une courte vidéo conçue pour se répéter en continu, dont la fin s’enchaîne directement avec le début pour que le redémarrage soit invisible. Les marques l’utilisent sur les sites web, les écrans, les posts sociaux et les streams.
### Quelle durée pour une vidéo en boucle ?
Les boucles vives peuvent durer 5 à 10 secondes ; les boucles de fond régulières tournent souvent autour de 10 à 20 secondes ; les boucles lentes pour des écrans regardés toute la journée gagnent à durer 20 à 30 secondes pour que la répétition se remarque moins.
### Quel format choisir pour une vidéo en boucle ?
Le MP4 se lit presque partout et reste le choix sûr pour les réseaux sociaux. Sur un site web, proposez d’abord le WebM et le MP4 en repli. Gardez le GIF pour l’e-mail.
### Pourquoi ma vidéo en boucle saute-t-elle à la fin ?
Le plus souvent, la dernière image répète la première, ou un élément du clip n’accomplit pas un cycle entier. Supprimez l’image en double et faites finir chaque mouvement là où il a commencé.
### Peut-on mettre du texte sur une vidéo en boucle ?
Oui, mais gardez le texte immobile. Des mots qui apparaissent en animation réapparaîtront à chaque boucle, ce qui rend le redémarrage évident.