Les propriétés CSS background et background-image n’acceptent que des images bitmap ou SVG et des valeurs de couleurs ou de dégradés, il n’est donc pas possible d’y intégrer une vidéo. Cependant, nous pouvons reproduire l’apparence d’une vidéo d'arrière-plan plein écran en forçant son apparition derrière d’autres éléments HTML. Le défi est d’avoir une vidéo plein écran et aussi responsive que nos images de background.

👉🏿 Note : pour illustrer cet article, nous utiliserons une vidéo d'Alexandre Wagner.

Quelques considérations préliminaires

Avant de nous lancer dans la réalisation, voici quelques facteurs qu’il convient de garder à l’esprit :

• N’utilisez pas cette technique simplement parce que vous le pouvez : le contenu vidéo doit amplifier le message du site, évitez les effets cosmétiques vides de sens.
• La vidéo sera sans doute réglée par défaut sur autoplay, mais il est préférable de la régler sur mute, et même, idéalement, il vaudrait mieux qu’elle ne comporte pas de son du tout. Vous pouvez créer un bouton pour remettre le son avec JavaScript.
• La vidéo devrait afficher une image de rechange pour les navigateurs incompatibles avec HTML5. L’image sera utilisée également comme arrière-plan pour les mobiles : la plupart des smartphones et tablettes ne supportent pas autoplay, pour des raisons évidentes.
• La durée est importante : Une vidéo trop courte semble répétitive (si elle est diffusée en boucle), et si elle est trop longue elle devient une histoire en elle-même, un contenu qui mérite d’être traité comme un élément séparé. Je suggèrerais une durée de 12 à 30 secondes.
• L’accessibilité est importante : tout texte placé sur la vidéo devrait offrir un contraste permettant sa lecture. Les utilisateurs doivent accéder facilement à une interface de contrôle pour mettre la vidéo en pause. Idéalement, la vidéo ne devrait passer qu’une seule fois.
• La bande passante : la vidéo doit être courte et compressée aussi efficacement que possible. En même temps, elle doit pouvoir se redimensionner sur tous les terminaux. Dans les cas les plus complexes, vous pourriez envisager d'utiliser des media queries en ligne, ou matchmedia de JavaScript pour proposer des qualités différentes de la vidéo en fonction de l'écran. Essayez de ne pas dépasser 5Mb, idéalement restez en-dessous des 500K.

En gardant tous ces facteurs à l'esprit, passons maintenant aux techniques nous permettant de réaliser notre objectif. Nous utiliserons pour cela une courte vidéo d’Alexander Wagner, vous pouvez voir le résultat (et le code) sur ce CodePen :

voir Fullscreen HTML5 Page Background Video de Dudley Storey dans CodePen

Pour voir la vidéo en plein écran, regardez cette démo.

Une approche purement CSS

On construit la vidéo HTML5 comme habituellement :

<video autoplay loop poster="polina.jpg" id="bgvid">
  <source src="polina.webm" type="video/webm">
  <source src="polina.mp4" type="video/mp4">
</video>

Attention : l’ordre des fichiers vidéo est vital, Chrome a un bug actuellement qui fait qu’il ne jouera pas une vidéo .webm si le fichier n’est pas le premier dans la liste.

L’image de fallback sera remplacée par la première image de la vidéo une fois celle-ci chargée, donc ce serait une bonne idée de prendre cette première image comme image de fallback.

Pour afficher la vidéo plein écran :

video#bgvid {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; z-index: -100;
  background: url(polina.jpg) no-repeat;
  background-size: cover;
}

Les navigateurs anciens ne reconnaîtront pas les formats vidéo, mais ils devraient malgré tout reconnaître la balise <video> (à l'exception d'IE8, voir ci-dessous). Pour ces navigateurs, nous créons une background-image pour l’élément, en utilisant la même image de remplissage.

Note sur IE8

Non seulement IE8 ne reconnaît pas la balise <video> mais il ne reconnaît aucun nouvel élément de HTML5. C’est un problème puisque nous voulons pouvoir, a minima, appliquer un style à l’élément et placer une image de background à l’intérieur. Pour y parvenir, il nous faut deux choses : tout d’abord une ligne de JavaScript, dans une boucle conditionnelle :

<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->

Ensuite, dans notre CSS, une déclaration qui permette à IE de comprendre qu’il s’agit d’un élément de niveau bloc :

video { display: block; }

Avec cela, IE8 peut au moins appliquer un style à l’élément <video> en y insérant une image de d’arrière-plan.

Quid des mobiles ?

L’affichage plein écran d’une vidéo de background sur les terminaux mobiles pose plusieurs défis :

1. La plupart des plateformes mobiles (en particulier iOS) refusent l’autoplay des vidéos HTML5 pour éviter des chargements de données potentiellement ruineux.
2. Dans ce cas, la vidéo sera affichée avec un bouton play embarqué, ce qui à son tour...
3. ...peut empiéter sur le fonctionnement de touches du terminal, et rendre impossible le bon fonctionnement de liens présents dans le contenu figurant au-dessus de la vidéo.

Même s’il est possible d’utiliser une détection de vidéo autoplay avec JavaScript, la solution la plus simple est d’utiliser une media query qui substitue complètement la vidéo par l’image de fallback pour les petits écrans. On ajoute à notre CSS précédent :

@media screen and (max-device-width: 800px) {
html { background: url(polina.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
}

Le plus important ici c'est la media query elle-même, elle devra être modifiée en fonction des attentes du site et de l’espace disponible. Actuellement, elle détecte si l’affichage écran est inférieur à 800px de large, auquel cas elle remplace la vidéo par une image statique d’arrière-plan. Remarquez qu’on ne tient pas compte de Rétina : un iPad3 sera toujours considéré comme ayant 768px alors que sa résolution est bien plus élevée.

Intégrer l'accessibilité

Les utilisateurs souffrant de troubles vestibulaires peuvent être désorientés par le mouvement, en particulier lorsqu’ils essaient de lire un texte situé sur une image mouvante. Les utilisateurs souffrant d’autisme (pas nécessairement aigu) peuvent être dérangés par un changement rapide. Pour ces utilisateurs — et pour tous les autres — un bouton pause devrait être clairement visible. Idéalement, la vidéo devrait également s’arrêter et disparaître lorsqu’elle a été jouée entièrement. Pour cela, ajoutons un élément <button> à notre page :

<button id="vidpause">Pause</button>

Puis ce JavaScript en bas de notre page :

var vid = document.getElementById("bgvid");
var pauseButton = document.getElementById("vidpause");
function vidFade() {
  vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
  // only functional if "loop" is removed
  vid.pause();
  // to capture IE10
  vidFade();
});
pauseButton.addEventListener("click", function() {
  vid.classList.toggle("stopfade");
  if (vid.paused) {
    vid.play();
    pauseButton.innerHTML = "Pause";
  } else {
    vid.pause();
    pauseButton.innerHTML = "Paused";
  }
})

Le JavaScript fait appel à du CSS ajouté à votre feuille de styles (les préfixes constructeurs sont omis pour la clarté, et NDT: vous pouvez les omettre dans votre code en utilisant Autoprefixer :

video#bgvid { transition: 1s opacity; }
.stopfade { opacity: .5; }

Bien sûr, il convient également d’ajouter du CSS pour faire disparaître votre élément bouton des terminaux mobiles, selon la solution proposée plus haut, sinon votre utilisateur ne comprendra pas pourquoi il y a un bouton sur une image.

Alternatives purement JavaScript

Même si à mon avis une solution HTML/CSS est plus intéressante qu’un framework, sachez qu’il existe au moins un plugin jQuery et quelques codes JavaScript solides pour parvenir au même résultat.

Conclusion

Une vidéo en arrière-plan peut avoir un fort impact sur votre site, mais rappelez-vous toujours qu’un grand pouvoir vous donne de grandes responsabilités : utilisez ces fonctionnalités judicieusement.

Regardez la démo plein écran.

👉🏿 Un autre article intéressant sur le sujet :

Une vidéo d’arrière-plan sur toute la page en HTML et CSS, la traduction (légèrement adaptée) de l’article de Florent Verschelde par Victor Brito sur Alsacréations.