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

Philippe | 17 mars 2014 | Programmation | 5 commentaires

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 :

	function dimensions(){
		var hauteur = window.innerHeight;
		var largeur = window.innerWidth;
		var div1 = document.getElementById('cont_1');
		var div2 = document.getElementById('cont_2');
		var video = document.getElementById('video_background');
		div1.style.height=hauteur+"px";
		div1.style.width=largeur+"px";
		div2.style.height=hauteur+"px"; 
		}

Cette fonction placée entre des balises <script></script>, sera appelée lorsque la page sera chargée par <body onload= »dimensions() »>

Quand au blocs de balises <div>, ils donneront le code html suivant :

<div id="cont_1">
   <div class="header"> 
		<div class="titre-centre"> Site Vidéo </div>
   </div>
	<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
		<source src="video.mp4" type="video/mp4">
		<source src="video.ogv" type="video/ogg">
		<img src="background.jpg" width="100%" height="100%" >
	</video>
   </div>
   <div id="cont_2">
   
<!-- Le contenu ici -->
			
   </div>

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.

Tu veux le code ? Pas de problème, c’est ici le code source

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 Tumblr

Digg Digg

Ajoutez des boutons pour vous suivre sur Twitter, Facebook, Google+ et YouTube [Tuto]

10 effets javascript et CSS pour menus

Editeurs HTML : 4 extensions chrome

5 Comments

OzrelaSan 25 octobre 2014 Répondre

Bonjour je rencontre un problème avec votre méthode ! comment fixer la vidéo pour pouvoir créer de plus grandes pages ? Merci encore ! 🙂

Philippe 2 novembre 2014 Répondre

Pour ajouter du contenu en dessous, il faut mettre la vidéo dans une « div » et remplacer body dans le code css par cette div (et une class). Le problème vient des basiles body et html qui doivent avoir une hauteur attribuée.
J’essayerai de mettre à jour l’article pour répondre à ta question lorsque je trouverai le temps.
Merci pour ton commentaire

christophe poncelet 10 janvier 2016 Répondre

bonjour

Quand je mets le fond video, cela masque mon contenu.
Comment faire ?
merci

Philippe 10 janvier 2016 Répondre

Il faut probablement modifier le z-index
Mettre z-index: 50; pour le contenu dans les css ou z-index:-50; pour la vidéo.
Tu peux par exemple mettre le contenu dans une « div » et écrire dedans :
style= »z-index:50;width:100%;height:100%; »
Autrement, tu peux aussi adapter le code source de l’exemple.
Bonne continuation
Philippe

Anonyme 26 décembre 2016 Répondre

Super 😉 Tout fonctionne chez moi, merci bien !!