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 !