Créer un background vidéo fullscreen avec HTML5

Il n'est pas possible d'intégrer une vidéo avec les propriétés CSS background ou background-image, mais Dudley Storey nous montre comment forcer l'apparition d'une vidéo responsive fullscreen derrière les éléments HTML.

Par

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.

image
Nous utiliserons une vidéo d’Alexander 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 :

See the Pen Fullscreen HTML5 Page Background Video by Dudley Storey (@dudleystorey) on 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 (en anglais & français) :

Full page video background with HTML and CSS, par Florent Verschelde, une approche différente et l’introduction de object-fit dont on reparlera certainement bientôt dès que la compatibilité sera meilleure. Voir la démo.

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.


Intéressé par HTML ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur HTML parus dans la Cascade.


Du même auteur dans La Cascade :

Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


original paru le dans le blog de Dudley Storey, the new code.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu'il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog demosthenes.info des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de l’auteur.
Copyright Dudley Storey © 2014.