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.

site-video-outils-web

 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.

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 :
virus thème wordpress
Vérifier la sécurité d’un thème wordpress avec un plugin.

Les thèmes gratuits sont les plus recherchés lorsqu'on se lance dans le blogging sous Wordpress. Il faut néanmoins faire attention...

mp3_player
La chanson de l’année 2012 + un lecteur mp3 pour site Web

Le début d'année, est souvent le moment des bilans et des rétrospectives. La meilleur chanson de l'année 2012 n'est pas celle...

google maps
Comment insérer Google maps sur WordPress ?

Vous aimeriez montrer à vos visiteurs ou vous vous situez sur une carte, afficher un plan d'accès ou montrer une...

Fermer