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.

Les recherches qui vous ont mené ici

  • comment ajouter un fond decran dans la balise div en css (1)
  • video fond site html5 (1)
  • video fond d\écran site internet (1)
Ces articles pourraient vous intéresser :
4 Comments

Add a Comment

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

Lire plus :
navigation privée
Comment surfer incognito sur le web ?

Quel point commun existe-t-il entre une vache, un médicament et un surfeur du web ? La traçabilité. Aujourd'hui, la vie...

appli android outils-web
Comment créer une application android en ligne pour un blog ?

Ça y est ! Outils web a son application android ! Elle est téléchargeable ici : application android outils-web.fr Ce fut...

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

Vous avez une page FaceBook ou Google+, vous avez une chaîne YouTube ou un compte Twitter. Vous souhaiteriez avoir des...

Fermer