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

site-video-outils-web

 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.

5 Comments

Add a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire plus :
chat_outils_web_ascii
Le code ascii, les caractères spéciaux et le ascii art

Le code ASCII vous connaissez ? Pourtant c'est très utile et même parfois très joli. Au sommaire : 1. Qu'est-ce...

plugin WordPress
Comment choisir et installer les meilleurs plugins WordPress ?

Voici un tout petit article pour guider les personnes embarrassées devant plusieurs Plugins WordPress et ne sachant pas lequel choisir. Il est...

google page rank
2 extensions google chrome indispensables pour les webmasters

Voici deux extensions Google chrome indispensables. - La première permet de connaître une foule d'informations  SEO sur un site en...

Fermer