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.
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.
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
- video sur fond site internet (1)
Peut-être avez-vous déjà, comme moi, perdu beaucoup de temps avec vos vidéos. Convertir une ...
Vous avez peut-être récupéré des fichiers vidéos (je ne veux pas savoir où) et vous aimeriez ...
Voici un petit tutoriel expliquant comment indiquer à vos visiteurs le nombre d'articles pub ...
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 !
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