Vous arrivez sur un site web et la première chose que vous voyez n’est pas une image statique, mais une vidéo vivante qui occupe tout l’écran. Le rendu est haut de gamme, professionnel. Et surtout, cela fonctionne sur n’importe quel appareil, du téléphone à l’écran ultra-large, sans la moindre bande noire.

Vous pensez peut-être qu’un tel résultat nécessite du JavaScript, des calculs de viewport et des opérations mathématiques complexes. C’est aussi ce que je pensais la première fois que je me suis attaqué à ce sujet. J’ai essayé calc(), les unités viewport, j’ai même écrit un script de redimensionnement. Cela fonctionnait sous Firefox, cassait sous Chrome et restait totalement muet sous Safari.

Puis il s’est avéré que CSS dispose depuis plusieurs années d’une propriété qui fait exactement ce dont nous avons besoin, sans une seule ligne de JS. Aujourd’hui, je vais vous montrer comment construire un fond vidéo parfaitement responsive qui se comporte comme background-size: cover, mais pour de la vidéo en direct.

💡 Aperçu rapide:

• Positionnez l’élément vidéo en fixed pour couvrir l’intégralité du viewport
• Appliquez object-fit cover, la vidéo s’ajuste automatiquement en rognant l’excédent et en préservant le centre
• Pour les navigateurs plus anciens, conservez une solution de repli avec des media queries et un «conteneur surdimensionné»
• Enveloppez le tout dans un conteneur, pratique pour les superpositions, les boutons et le texte par-dessus la vidéo
• Adaptez pour le mobile: source différente, playsinline et une image de repli

Approche de base: le positionnement fixed

Tout fond vidéo commence par faire en sorte que l’élément <video> occupe toute la zone d’affichage. Cela se fait avec position: fixed et des décalages à zéro:

1
#myvid {
2
  position: fixed;
3
  top: 0;
4
  right: 0;
5
  bottom: 0;
6
  left: 0;
7
}

L’élément s’étire exactement à la largeur et à la hauteur du viewport. Le problème surgit immédiatement: la vidéo est presque toujours tournée en 16:9, mais l’écran de l’utilisateur peut être carré, ultra-large ou en mode portrait. Résultat: ces bandes noires qui gâchent tout l’effet.

Si vous avez déjà travaillé avec des images de fond en CSS, vous savez que background-size possède une valeur cover. Elle force l’image à remplir entièrement le conteneur, en rognant l’excédent tout en conservant les proportions. Nous avons besoin exactement du même comportement pour la vidéo. Et cela existe.

Solution moderne: object-fit: cover

La propriété object-fit a été créée précisément pour cela. Elle détermine comment un élément remplacé (image ou vidéo) s’inscrit dans son conteneur, et la valeur cover fonctionne exactement comme background-size: cover:

1
#myvid {
2
  position: fixed;
3
  top: 0;
4
  right: 0;
5
  bottom: 0;
6
  left: 0;
7
  width: 100%;
8
  height: 100%;
9
  object-fit: cover;
10
}

La vidéo se met à l’échelle pour remplir complètement le conteneur. Si les proportions ne correspondent pas, le navigateur rogne l’excédent en haut et en bas (ou à gauche et à droite) et centre automatiquement le résultat. Aucune bande noire.

En 2026, object-fit est pris en charge par 96,39% des navigateurs dans le monde (données de Can I Use). Chrome à partir de la version 32, Firefox à partir de la 36, Safari à partir de la 10, Edge à partir de la 79. Internet Explorer 11 ne le supporte pas, mais sa part de marché tend vers zéro et sa période de support est terminée.

Pour la grande majorité des projets, ces trois lignes de CSS suffisent. Le fond vidéo est prêt.

Problèmes de mise à l’échelle: ce qui se passe «sous le capot»

Même si vous utilisez object-fit, il est utile de comprendre la mécanique. Deux scénarios sont possibles:

Première situation: le viewport est plus large que la vidéo (ratio d’écran supérieur à 16:9). La vidéo s’étire en largeur pour remplir toute la zone disponible, mais sa hauteur devient supérieure à celle de l’écran, donc le contenu est rogné en haut et en bas. La zone de rognage est centrée automatiquement.

Deuxième situation: le viewport est plus étroit (ratio inférieur à 16:9, par exemple orientation portrait sur une tablette). La vidéo s’étire en hauteur pour remplir toute la zone disponible, la largeur dépasse le viewport, le rognage se fait à gauche et à droite, et le centre est préservé.

object-fit: cover gère seul ces deux scénarios. Mais si, pour une raison quelconque, vous travaillez sans cette propriété, la section suivante est pour vous.

Astuce classique avec un «conteneur surdimensionné»

Avant que object-fit ne devienne un standard, les développeurs utilisaient une technique astucieuse. L’idée: rendre le conteneur délibérément plus grand que la vidéo et que le viewport, et le navigateur centre le contenu automatiquement.

En pratique, cela donne ceci:

1
#myvid {
2
  position: fixed;
3
  top: 0;
4
  left: 0;
5
  width: 100%;
6
  height: 100%;
7
}
8
 
9
@media (min-aspect-ratio: 16/9) {
10
  #myvid {
11
    height: 300%;
12
    top: -100%;
13
  }
14
}
15
 
16
@media (max-aspect-ratio: 16/9) {
17
  #myvid {
18
    width: 300%;
19
    left: -100%;
20
  }
21
}

Les media queries déterminent quel axe est en dépassement et définissent une taille qui est un multiple du viewport, avec un décalage négatif pour le centrage. La vidéo finit par être plusieurs fois plus grande que la zone d’affichage, et le navigateur la rogne et la centre en utilisant le mécanisme standard pour les éléments remplacés.

Aujourd’hui, ce code est davantage un filet de sécurité pour les projets legacy. Mais si vous maintenez un site où object-fit n’est pas disponible pour une raison quelconque, l’astuce fonctionne de manière fiable.

Code de production: assembler le tout

Dans un projet réel, un fond vidéo existe rarement seul. Par-dessus, il y a un titre, un bouton, un formulaire, une superposition pour la lisibilité du texte. C’est pourquoi la vidéo est enveloppée dans un conteneur qui conserve les dimensions du viewport:

1
#SDStudio_VIDEO_BACKGROUND {
2
  position: fixed;
3
  top: 0;
4
  right: 0;
5
  bottom: 0;
6
  left: 0;
7
  overflow: hidden;
8
}
9
 
10
#SDStudio_VIDEO_BACKGROUND > video {
11
  position: absolute;
12
  top: 0;
13
  left: 0;
14
  width: 100%;
15
  height: 100%;
16
}
17
 
18
/* Fallback: if object-fit is not supported */
19
@media (min-aspect-ratio: 16/9) {
20
  #SDStudio_VIDEO_BACKGROUND > video {
21
    height: 300%;
22
    top: -100%;
23
  }
24
}
25
 
26
@media (max-aspect-ratio: 16/9) {
27
  #SDStudio_VIDEO_BACKGROUND > video {
28
    width: 300%;
29
    left: -100%;
30
  }
31
}
32
 
33
/* Override if object-fit is available */
34
@supports (object-fit: cover) {
35
  #SDStudio_VIDEO_BACKGROUND > video {
36
    top: 0;
37
    left: 0;
38
    width: 100%;
39
    height: 100%;
40
    object-fit: cover;
41
  }
42
}

La directive @supports vérifie la prise en charge de object-fit et écrase les règles de repli. Un navigateur moderne reçoit la solution propre en trois lignes. Un navigateur obsolète fonctionne via les media queries et le conteneur surdimensionné.

Le balisage est minimal:

1
<div id="SDStudio_VIDEO_BACKGROUND">
2
  <video autoplay muted loop playsinline>
3
    <source type="video/mp4" src="myvid.mp4"
4
            media="(orientation: landscape)">
5
    <source type="video/webm" src="myvid.webm"
6
            media="(orientation: landscape)">
7
    <source type="video/mp4" src="myvid_square.mp4"
8
            media="(orientation: portrait)">
9
    <source type="video/webm" src="myvid_square.webm"
10
            media="(orientation: portrait)">
11
  </video>
12
</div>

Quelques détails faciles à oublier. muted est obligatoire: les navigateurs bloquent la lecture automatique avec le son. playsinline empêche iOS de passer la vidéo en plein écran. Inutile de vous rappeler loop, un fond vidéo sans boucle donne une impression d’erreur. Par ailleurs: prévoyez une source carrée pour l’orientation portrait via media="(orientation: portrait)". Un clip standard 16:9 sur un écran vertical sera rogné presque entièrement et se transformera en un scintillement sans signification.

⁉️🤔 Foire aux questions

Est-il nécessaire d’utiliser spécifiquement <video>, ou puis-je mettre une vidéo YouTube en fond?

Vous pouvez utiliser une iframe YouTube en fond, mais avec des réserves. Vous perdez le contrôle sur la mise en mémoire tampon, vous ne pouvez pas supprimer les éléments d’interface et les navigateurs mobiles bloquent souvent la lecture automatique des iframes. Pour les fonds, une <video> auto-hébergée est toujours préférable. Si vous intégrez YouTube, ajoutez les paramètres ?autoplay=1&mute=1&controls=0&loop=1&playlist=VIDEO_ID.

Quel format vidéo choisir pour une compatibilité maximale?

La combinaison MP4 (H.264) + WebM (VP8/VP9) couvre tous les navigateurs modernes. Le MP4 est le format principal, le WebM est pour Chrome et Firefox (taille plus petite à qualité égale). Résolution pour les fonds: la Full HD suffit. Les résolutions supérieures apportent des gains de qualité imperceptibles en arrière-plan, tandis que la taille du fichier croît de manière quadratique. Contenez les vidéos à quelques mégaoctets pour un chargement rapide.

Que montrer aux utilisateurs pendant le chargement de la vidéo?

Définissez poster sur la <video>, soit une première image statique, soit une image spécialement préparée. Solution de repli CSS: background-image sur le conteneur, que object-fit ne couvrira pas (elle se trouve sur un calque inférieur). Pour les utilisateurs mobiles sur des connexions lentes, il est préférable de ne pas charger du tout le fond vidéo. Utilisez la media query prefers-reduced-data et substituez une image statique.

Comment rendre le texte par-dessus la vidéo lisible?

Ajoutez une superposition semi-transparente entre la vidéo et le contenu: background: rgba(0, 0, 0, 0.4) sur un pseudo-élément ::after du conteneur avec position: absolute; inset: 0; z-index: 1. Le contenu lui-même reçoit z-index: 2; position: relative. Choisissez le coefficient d’assombrissement en fonction de la vidéo spécifique: un métrage plus clair nécessite plus, un métrage plus sombre nécessite moins.

Cela fonctionne-t-il sur iOS et Android?

Oui, avec des réserves. iOS exige playsinline (sinon la vidéo passe dans un lecteur plein écran). Sur les versions de Safari iOS antérieures à la 10, object-fit n’est pas pris en charge, donc la solution de repli du code de production ci-dessus prendra le relais. Android Chrome fonctionne correctement. Sur les deux plateformes, la vidéo ne démarre qu’après la première interaction de l’utilisateur si muted n’est pas défini, donc muted est strictement requis.

Que retenir pour votre projet: le verdict en bref

Si vous construisez un site web en 2026, utilisez object-fit: cover. Trois lignes de CSS, pas de JavaScript, une responsivité complète et immédiate. La prise en charge par les navigateurs est quasi universelle et la couverture ne fait que croître chaque mois.

Si vous avez un projet legacy avec une prise en charge obligatoire des anciens Edge (avant la 79) ou Firefox (avant la 36), le code de production de la section précédente vous offre les deux mondes: @supports active la solution moderne, tandis que les media queries rattrapent le reste.

Et rappelez-vous: un fond vidéo, c’est la cerise sur le gâteau. Si le clip pèse 20 mégaoctets et met huit secondes à charger, l’utilisateur sera parti avant d’avoir vu votre magnifique titre. Compressez, testez à des vitesses mobiles et fournissez toujours une solution de repli statique.

À de beaux arrière-plans.