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 !)
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.
[pastacode lang= »markup » manual= »%3Cvideo%20id%3D%22video_background%22%20preload%3D%22auto%22%20autoplay%3D%22true%22%20loop%3D%22loop%22%20muted%3D%22muted%22%20volume%3D%220%22%3E%0A%20%20%20%3Csource%20src%3D%22Outils-Web.fr.mp4%22%20type%3D%22video%2Fmp4%22%3E%0A%20%20%20%3Csource%20src%3D%22Outils-Web.fr.ogv%22%20type%3D%22video%2Fogg%22%3E%0A%20%20%20%3Cimg%20src%3D%22background.jpg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20%3E%0A%3C%2Fvideo%3E » message= » » highlight= » » provider= »manual »/]
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).
[pastacode lang= »css » message= » » highlight= » » provider= »manual » manual= »body%7B%0Amargin%3A%200%3B%0A%7D%0A%23video_background%7B%0Aposition%3A%20absolute%3B%0Abottom%3A%200px%3B%0Aright%3A%200px%3B%0Amin-width%3A%20100%25%3B%0Amin-height%3A%20100%25%3B%0Awidth%3A%20auto%3B%0Aheight%3A%20auto%3B%0Az-index%3A%20-1000%3B%0Aoverflow%3A%20hidden%3B%0A%7D »/]
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 :
[pastacode lang= »javascript » manual= »%09function%20dimensions()%7B%0A%09%09var%20hauteur%20%3D%20window.innerHeight%3B%0A%09%09var%20largeur%20%3D%20window.innerWidth%3B%0A%09%09var%20div1%20%3D%20document.getElementById(‘cont_1’)%3B%0A%09%09var%20div2%20%3D%20document.getElementById(‘cont_2’)%3B%0A%09%09var%20video%20%3D%20document.getElementById(‘video_background’)%3B%0A%09%09div1.style.height%3Dhauteur%2B%22px%22%3B%0A%09%09div1.style.width%3Dlargeur%2B%22px%22%3B%0A%09%09div2.style.height%3Dhauteur%2B%22px%22%3B%20%0A%09%09%7D » message= » » highlight= » » provider= »manual »/]
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 :
[pastacode lang= »markup » manual= »%3Cdiv%20id%3D%22cont_1%22%3E%0A%20%20%20%3Cdiv%20class%3D%22header%22%3E%20%0A%09%09%3Cdiv%20class%3D%22titre-centre%22%3E%20Site%20Vid%C3%A9o%20%3C%2Fdiv%3E%0A%20%20%20%3C%2Fdiv%3E%0A%09%3Cvideo%20id%3D%22video_background%22%20preload%3D%22auto%22%20autoplay%3D%22true%22%20loop%3D%22loop%22%20muted%3D%22muted%22%20volume%3D%220%22%3E%20%0A%09%09%3Csource%20src%3D%22video.mp4%22%20type%3D%22video%2Fmp4%22%3E%0A%09%09%3Csource%20src%3D%22video.ogv%22%20type%3D%22video%2Fogg%22%3E%0A%09%09%3Cimg%20src%3D%22background.jpg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20%3E%0A%09%3C%2Fvideo%3E%0A%20%20%20%3C%2Fdiv%3E%0A%20%20%20%3Cdiv%20id%3D%22cont_2%22%3E%0A%20%20%20%0A%3C!–%20Le%20contenu%20ici%20–%3E%0A%09%09%09%0A%20%20%20%3C%2Fdiv%3E » message= » » highlight= » » provider= »manual »/]
Bien sûr, la vidéo sera toujours gérée par le css suivant :
[pastacode lang= »css » manual= »%20%20%20%23video_background%20%7B%0A%09position%3A%20absolute%3B%20%0A%09bottom%3A%200px%3B%20%0A%09right%3A%200px%3B%20%0A%09min-width%3A%20100%25%3B%20%0A%09min-height%3A%20100%25%3B%20%0A%09width%3A%20auto%3B%20%0A%09height%3A%20auto%3B%20%0A%09z-index%3A%20-1000%3B%20%0A%09overflow%3A%20hidden%3B%0A%20%20%20%7D » message= » » highlight= » » provider= »manual »/]
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.
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
bonjour
Quand je mets le fond video, cela masque mon contenu.
Comment faire ?
merci
Il faut probablement modifier le z-index
Mettre z-index: 50; pour le contenu dans les css ou z-index:-50; pour la vidéo.
Tu peux par exemple mettre le contenu dans une « div » et écrire dedans :
style= »z-index:50;width:100%;height:100%; »
Autrement, tu peux aussi adapter le code source de l’exemple.
Bonne continuation
Philippe
Super 😉 Tout fonctionne chez moi, merci bien !!