La mode n’est plus aux photos géantes en fond de page. Maintenant, c’est au tour des vidéos !

Comme ça, vous voulez carrément afficher une vidéo comme fond de votre site web ? Grâce à HTML5 et CSS3, c’est super simple. Suivez le guide !

Jetez d’abord un oeil sur le résultat : Démo « Les routes du paradis ». Chouette, non ?

Commençons par l’html :

<video src="votre-video.mp4"></video>
<div> votre texte ici </div>

Au tour du css :

video {
  z-index: -999;
  position: fixed;
  min-height: 100%;
  min-width: 100%;
}

Le z-index force la vidéo à rester au fond de la page (le -999 correspond à la profondeur). Tout ce qui aura un index plus grand, apparaîtra au dessus.

position:fixed est obligatoire pour être certain que la superposition se fasse avec tous les éléments que vous ajouterez après.

Enfin, les min height et width tags à 100% font que la vidéo prendra toute la place disponible.

Pour centrer le texte horizontalement et verticalement, il faut ajouter le css suivant :

html, body { width: 100%; height: 100%; }
body {display:table;}
div {display: table-cell; vertical-align: middle; text-align: center;}

Et voilà !

Cette méthode fonctionne sur les navigateurs principaux : je l’ai testé sur Firefox, Chrome et Safari. Et cela marche aussi sur IE9 !