Vidéo en arrière-plan de site web : poids, lecture auto, accessibilité

Sur un site avec une vidéo en arrière-plan, une vidéo muette en boucle joue derrière une section, le plus souvent l’en-tête, pendant que le titre et les boutons sont posés dessus. Bien faite, elle est légère, discrète et facultative : elle démarre toute seule en silence, montre une image fixe terminée avant de se charger, se met en pause pour ceux qui préfèrent moins d’animations et ne rend jamais les mots plus difficiles à lire. Mal faite, c’est l’élément le plus lourd et le plus distrayant de la page.

Quand une vidéo en arrière-plan vaut la peine

Une vidéo en arrière-plan mérite sa place quand le mouvement est le message : l’eau pour une école de natation, la vapeur pour un torréfacteur, une matière qui dérive lentement pour une marque dont le style est l’identité. Si le mouvement n’est que décoratif, une option plus légère donne en général un aussi bon résultat. Comparez les choix avant de vous engager.

Le HTML d’une vidéo en arrière-plan

Quatre attributs font l’essentiel. muted permet au navigateur de la lancer automatiquement, car les navigateurs bloquent en général la lecture automatique avec son. playsinline empêche l’iPhone de l’ouvrir en plein écran. loop la répète, et poster affiche une image fixe pendant le chargement. Comme elle est décorative, masquez-la aux lecteurs d’écran.

<section class="hero">
  <video class="hero-video" autoplay muted loop playsinline
         poster="/media/hero-poster.jpg" aria-hidden="true">
    <source src="/media/hero.webm" type="video/webm">
    <source src="/media/hero.mp4" type="video/mp4">
  </video>

  <div class="hero-content">
    <h1>Colour that moves with you</h1>
    <button class="hero-pause" type="button">Pause background</button>
  </div>
</section>

.hero {
  position: relative;
  min-height: 80vh;
  overflow: hidden;
  background: #120a2e; /* shows before the poster arrives */
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills any shape without stretching */
}
.hero-content {
  position: relative; /* sits above the video */
}

Le guide de MDN sur l’élément video liste tous les attributs. N’oubliez pas que la lecture automatique est une demande, pas une garantie : certains téléphones en mode économie d’énergie ne la lancent pas. C’est pourquoi le poster doit ressembler à une création terminée à lui seul.

Garder le fichier vidéo léger

La vidéo est en général le plus gros fichier de toute page qui en contient une. Des images douces et lentes se compressent bien mieux que des images nettes et chargées : le choix graphique est donc aussi un choix de performance. Gardez une boucle courte, autour de 8 à 15 secondes, supprimez entièrement la piste audio et ne servez jamais une taille supérieure à celle qu’affiche l’en-tête. Fixez-vous un budget de poids avant d’exporter, et vérifiez le résultat réel dans le panneau réseau de votre navigateur.

# MP4 (H.264): silent, web-ready, starts playing before it fully downloads
ffmpeg -i hero-master.mov -an -c:v libx264 -crf 26 -preset slow \
  -pix_fmt yuv420p -movflags +faststart -vf "scale=1920:-2" hero.mp4

# WebM (VP9): often smaller at similar quality
ffmpeg -i hero-master.mov -an -c:v libvpx-vp9 -crf 36 -b:v 0 \
  -vf "scale=1920:-2" hero.webm

# Poster: the first frame as a JPEG
ffmpeg -i hero.mp4 -frames:v 1 -q:v 3 hero-poster.jpg

En-tête de site 1920 × 1080

1920 × 1080

Recadrage téléphone

1080 × 1920

Réduction des animations et bouton pause

Certains visiteurs règlent leur appareil pour réduire les animations, parce que le mouvement leur donne le vertige ou les rend malades. Respectez ce réglage en montrant le poster au lieu de la vidéo. Par ailleurs, le critère WCAG Pause, Stop, Hide demande qu’un contenu animé qui démarre automatiquement et dure plus de cinq secondes, à côté d’autres contenus, puisse être mis en pause. Un petit bouton pause visible y répond.

const video = document.querySelector('.hero-video')
const button = document.querySelector('.hero-pause')
const reduce = matchMedia('(prefers-reduced-motion: reduce)')

function follow() {
  if (reduce.matches) video.pause()
  else video.play().catch(() => {}) // the browser may still refuse
}
reduce.addEventListener('change', follow)
follow()

button.addEventListener('click', () => {
  if (video.paused) {
    video.play()
    button.textContent = 'Pause background'
  } else {
    video.pause()
    button.textContent = 'Play background'
  }
})

Réduire les animations explique ce réglage et ce qu’il faut réduire d’autre.

Un texte lisible sur une vidéo en arrière-plan

Un texte sur une vidéo doit se lire sur chaque image, pas seulement sur le poster. La solution habituelle est un voile sombre sur toute la vidéo, qui fonctionne mais l’aplatit. Mieux vaut choisir des images calmes avec une zone tranquille là où vont les mots, éloigner le mouvement le plus lumineux du titre et utiliser une graisse forte en grande taille. Notre guide du texte sur une image propose sept techniques qui s’appliquent aussi à la vidéo.

Liste de contrôle pour une vidéo en arrière-plan

1. 1

   Vérifiez qu’il faut vraiment une vidéo

   Des images filmées, ou un mouvement qui doit être identique partout. Sinon, envisagez le CSS ou un shader.

2. 2

   Faites court, lent et muet

   8 à 15 secondes, sans piste audio, une boucle sans raccord visible.

3. 3

   Exportez deux formats et un poster

   WebM et MP4, pas plus grands que leur taille d’affichage, plus une première image fixe.

4. 4

   Utilisez les quatre attributs

   autoplay, muted, loop, playsinline, avec poster et aria-hidden.

5. 5

   Respectez les préférences de mouvement

   Affichez le poster en cas de réduction des animations et ajoutez un bouton pause.

6. 6

   Testez sur un vrai téléphone

   Vérifiez le temps de chargement en données mobiles, le mode économie d’énergie et le recadrage vertical.

Pour la conception de l’en-tête lui-même, voir les arrière-plans d’en-tête de site. Si votre arrière-plan animé est un Mark Gradiently, vous pouvez l’exporter en vidéo MP4 en boucle jusqu’en 1080p pour l’utiliser exactement ainsi.