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

  • fond de page web animé html5 (2)
  • comment ajouter un fond decran dans la balise div en css (1)
  • video fond site html5 (1)
Ces articles pourraient vous intéresser :
5 Comments

Add a Comment

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

Lire plus :
menu CSS javascript
10 effets javascript et CSS pour menus

Vous cherchez quelques petits codes pour animer vos menus et rendre vos liens textes plus funs ? Dans ce petit...

lettre orc
ORC : 4 sites pour convertir des images jpg en documents Word doc ou texte.

Pour faire de la reconnaissance de caractères dans une image jpg ou gif et la transformer en document word doc,...

google position
Les 3 meilleurs sites pour déterminer la position google d’une page pour un mot clé.

Pour connaître la position d'une page web de votre site sur Google pour un ou plusieurs mots clés, il n'est...

Fermer