Vidéo en boucle : des clips de marque qui semblent ne jamais finir

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.

Chacun de ces lieux a ses propres règles de format et de son. Les fonds vidéo sur un site web détaillent le cas du web, et les fonds vidéo d’ambiance 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.

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.

Quelle durée pour une boucle vidéo 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. 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. 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. 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. 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. 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.

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.

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

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 explique comment le respecter correctement.