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. Par exemple, PayPal propose ce genre de site. Le rendu obtenu est souvent du plus bel effet et marque les esprits.

Dans cet article nous allons voir 2 exemples concrets de site avec incrustation de vidéo en fond de page. Le premier propose une page fixe de la taille de la fenêtre, le second possède une partie sous la première, dans laquelle un contenu plus conséquent peut-être ajouté.

L’affichage de la vidéo se fera avec la balise <video> (qu’est-ce que t’es fort !)

 1- Utilisation de 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. Il faudra prévoir 2 formats de vidéos différents pour que les différents navigateurs soient contents.

La balise <video> prend en plus un certain nombre d’arguments :

• autoplay= »true » pour lancer automatiquement la vidéo
• loop= »loop » pour la faire tourner en boucle.
• muted= »muted » pour couper le son éviter que vos lecteurs ne finissent sourds ou très énervés. Vous pouvez aussi jouer sur le volume avec volume = »0 »
• preload =  »auto » permet le préchargement de la vidéo
• etc.

<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>

Une balise image (<img =src »… »/> doit être prévue pour les navigateurs anciens, ne supportant pas la balise <video> de html5.

L’adaptation et le dimensionnement de la vidéo sera gérée par  id= »video_background » dans la <video>.

2-Premier exemple : une vidéo en fond sans ascenseurs

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 : Exemple 1.

Télécharger le code source

2-Deuxième exemple : une vidéo en fond avec ascenseur et contenu adjacent

Se limiter à une page de la taille de la fenêtre du navigateur peut s’avéré limitant. Nous allons ajouter sous la vidéo dont la dimensions seront exactement celles de la fenêtre, une partie pour le contenu du site.

Pour ce faire, il va falloir utiliser JavaScript pour récupérer les dimensions de la fenêtre avec les méthodes :

window.innerHeight   et   window.innerWidth

Ces dimensions contenues dans des variables serviront à dimensionner un bloc de balises <div>.

Cette  »div », servira  de conteneur pour la vidéo plein écran et nous mettrons un second bloc de contenu en dessous pour pour … et bien le contenu.

En clair, le code Javascript sera :

Bien sûr, la vidéo sera toujours gérée par le css suivant :

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

Bon, on regarde ce que ça donne : Exemple 2.

L’adaptation pour les mobiles demandera un peu plus de travail…

Les meilleurs choses ont une fin. J’espère que ce petit article sur les sites web avec un background vidéo vous aura donné des idées. Avant de partir, n’hésite pas à partager.

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