Les premiers éléments qu’un visiteur voit sur votre site sont les plus importants, c’est ceux qui détermineront si votre site répond au besoin du visiteur et si ceux-ci lui donnent envie de rester.
Dès son arrivée, vous avez que quelques secondes pour convaincre le visiteur de rester sur votre site web.
Pour éviter que ce visiteur ne quitte trop vite votre site internet, vous pouvez lui créer un chemin d’éléments qui apparaissent lorsqu’il scrolle sur votre site ou bien vous pouvez captiver son attention en lui montrant une vidéo dès le début de votre site.
C’est cette seconde approche que nous vous expliquerons pour créer une vidéo en fond et pleine page de votre site.
Découvrez dans cet article les codes HTML, CSS et JavaScript nécessaires à la création d’un background vidéo fullscreen.
Sommaire :
Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.
Trouver un développeur web
Créer la structure en HTML
Avant de modifier l’apparence de la vidéo ou d’y ajouter des fonctionnalités interactives, vous allez devoir créer la structure de l’élément en background.
Dans notre exemple, la structure HTML de la vidéo en fond sera composée d’une balise permettant d’intégrer la vidéo ainsi que de textes et contrôles superposés à la vidéo.
Ajoutez le code suivant à la page où vous souhaitez intégrer la vidéo en pleine page :
<video id="background-video" autoplay loop muted>
<source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4">
</video>
<div class="content">
<h1>BIEN PLUS QU'UNE RIVIÈRE</h1>
<h2>Une source de vie</h2>
<button id="btnVideo" onclick="playAndPause()">Pause II</button>
</div>Vous devriez voir la vidéo s’afficher dans sa taille réelle suivie des deux titres H1 et H2 et d’un bouton « Pause ».
Maintenant que les éléments sont créés, il ne reste plus qu’à les mettre en forme avec du code CSS.
Trouvez le meilleur développeur web sur Codeur.com
Vos premiers devis en 15 minutes
Gratuit et sans obligation
Déjà plus de 75 000 clients
Ajouter le CSS à la vidéo
Ouvrez votre fichier CSS ou ouvrez des balises « style » dans votre fichier HTML et ajoutez le code suivant pour créer la mise en forme de la vidéo avec les éléments textuels et le bouton superposés.
#background-video {
height: 100vh;
width: 100vw;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
h1, h2, #btnVideo{
color: white;
font-family: Trebuchet MS;
font-weight: bold;
text-align: center;
}
h1 {
font-size: 6rem;
margin-top: 30vh;
}
h2 { font-size: 3rem; }
#btnVideo{
font-size: 1.5rem;
background: 0;
border: 0;
margin-left: 50%;
transform: translateX(-50%);
}Maintenant que la vidéo en plein écran est prête et fonctionnelle, il ne reste plus qu’à écrire le code JavaScript permettant d’arrêter la vidéo lorsqu’on clique sur le bouton « Pause ».
Les deux titres seront ainsi centrés au milieu de votre vidéo et le bouton pause sera modifié pour apparaître comme un texte et sera positionné en bas de la vidéo, sous les titres.
Évidemment cette dernière étape, tout comme le bouton pause, n’est pas obligatoire pour avoir une vidéo en fond, mais cela peut être utile si vos visiteurs souhaitent arrêter la vidéo à un moment donné.
Rendre la vidéo interactive
La dernière étape pour créer un background vidéo full screen sera de créer une interaction avec le bouton « Pause ».
Comme vous avez pu le voir dans la partie précédente, cette dernière partie n’est pas obligatoire pour avoir un rendu de vidéo en plein écran, mais c’est une fonctionnalité supplémentaire pour vos visiteurs.
Dans un fichier JS ou entre des balises « script » directement dans votre fichier HTML, écrivez le code suivant en adaptant le nom des sélecteurs si vous les avez nommés différemment que dans notre exemple, dans votre fichier CSS.
var video = document.getElementById("background-video");
var btn = document.getElementById("btnVideo");
function playAndPause () {
if (video.paused) {
video.play();
btn.innerHTML = "Pause II";
} else {
video.pause();
btn.innerHTML = "Play ▶";
}
}
Conclusion
Ajouter un background vidéo en pleine page est facile et rapide à mettre en place.
Cet élément ne demande pas trop de connaissances techniques et il est possible d’avoir un rendu attractif et professionnel simplement grâce à ce fond vidéo.
Retrouvez le code entier de l’exemple proposé dans cet article ainsi que l’aperçu du rendu sur le template codepen.io suivant :https://codepen.io/codeur-com/pen/QWmYEWM
Vous n’arrivez pas à intégrer votre background vidéo comme vous le souhaitez sur votre site ? Des développeurs web peuvent vous aider. Postez votre projet gratuitement sur Codeur.com et recevez vos premiers devis en moins de 30min.
