Créer un site avec une vidéo en fond de page web

Vous avez certainement déjà rencontré au détour d’un clic un site web dont le fond est une vidéo. Ces fonds de pages animés sont du plus bel effet et permettent de se démarquer des sites classiques.

Pour placer une vidéo en fond de page web, il existe des plugins javascripts jQuery, parfois payants, pourtant en combinant la balise <video>, HTML5 et CSS3, on peut aboutir au même résultat, très simplement. C’est ce que nous allons détailler dans cet article.

 1- Le code HTML5 et la balise <video>

Pour commencer, il vous faut créer ou se procurer une vidéo au format mp4 par exemple. La reconnaissance des formats est un réel problème avec HTML5, mais ne parlons pas des chose qui fâchent.

La balise <video> html5 est très simple d’utilisation, puisqu’il suffit d’ajouter entre <video> et </video> la balise source avec l’url de la vidéo et son type.

La balise <video> prend un certain nombre d’arguments dont autoplay= »true » pour lancer automatiquement la vidéo et loop= »loop » pour la faire tourner en boucle. Enfin Le son a été coupé avec muted= »muted », mais vous pouvez laisser le son en enlevant cet attribut, mais je trouve cela un peu « saoulant ».

<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="Outils-Web.fr.mp4" type="video/mp4">
<source src="Outils-Web.fr.ogv" type="video/ogg">
<img src="background.jpg" width="100%" height="100%" > </video>

Si le navigateur est ancien et ne supportent pas la balise <video> ou le format proposé, une image de fond sera affichée (<img …>)

Pour finir, vous avez remarqué que id= »video_background » est associé à la balise <video>. C’est cette id qui permettra d’appliquer à la vidéo les CSS qui l’afficheront en fond de page.

2-Les CSS pour mettre la vidéo en fond de page

Si vous avez des difficultés avec les CSS, reportez-vous à cet article pour insérer les css dans une page web.

Avant de s’occuper de l’incrustation de la vidéo en fond d’écran, on commence d’abord par supprimer les marges disgracieuses du corps du document (body).

body{
margin: 0;
}
#video_background{
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}

La suite est juste un positionnement absolu en haut à gauche et une adaptation des dimensions de la vidéo à la taille de l’écran.

z-index:-1000; permet de mettre la vidéo en arrière plan, derrière tous les autres contenus.

Enfin,  overflow: hidden; cache les débordement et les barres de défilement.

Voici le résultat : Le site vidéo de outils-web.fr.

Télécharger le code source

J’espère que ce petit article sur les sites web avec un background vidéo vous aura donné des idées et que vous n’hésiterez pas à le partager.

• Share on Facebook.
• Share on Twitter.
• Partager sur Google+
• Épingler!