Intégrer de la vidéo en arrière plan

Il est de plus en plus aisé d’intégrer de la vidéo à son blog ou son site personnel. Soit par une intégration directe avec des services tels que Youtube, soit en local avec votre vidéo hébergée sur votre serveur. Aujourd’hui, nous allons découvrir ensemble comment intégrer une vidéo en arrière plan tout en utilisant une astuce pour ne pas avoir à uploader vos vidéos sur votre serveur.

Posté le par Benoît Philibert|1429 vues

Résultat final

Intégration de la structure

Dans un premier temps, nous allons utiliser le composant jumbotron comme conteneur principal.

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <a class="btn btn-warning btn-lg" href="#" role="button">Learn more</a>
</div>
J’utilise un seul des deux paragraphes proposés par la structure du composant de base. Par la même occasion, j’ai supprimé le hr de séparation et remplacé la classe du bouton par btn-warning.

Intégration de la vidéo

<div class="jumbotron">
  <video autoplay muted loop>
    <source src="" type="video/mp4">
  </video>
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <a class="btn btn-warning btn-lg" href="#" role="button">Learn more</a>
</div>

Actuellement, notre code est « posé » mais le résultat n’est pas encore à la hauteur de nos espérances. Il contient à la fois notre balise <video> et nos différents éléments texte.

Pour arriver à nos fins, il va nous falloir utiliser différentes astuces d’intégration que propose Bootstrap comme le spacing ou encore l'overlay.

À noter l’utilisation des attributs suivant :

  • autoplay : lance la vidéo de manière automatique au chargement de la page.
  • muted : coupe le son de la vidéo.
  • loop : rejoue indéfiniment la vidéo une fois cette dernière terminée.

Utilisation de l’overlay

Pour rappel, l’overlay est une technique CSS permettant de mettre un élément au dessus d’un autre comme un état de « suspension ». Bootstrap propose une classe .card-img-overlay utilisée de base avec le composant card, permettant d’appliquer les conditions CSS nécessaires. C’est intéressant, puisque cela nous évite la redondance de code CSS supplémentaires dans notre feuille de style.

<div class="card-img-overlay">
   <h1 class="display-3">Hello from Space</h1>
   <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
   <a class="btn btn-warning btn-lg" href="#" role="button">Learn more</a>
</div>

Nous utilisons la classe .card-img-overlay dans une nouveau conteneur div qui englobera l’intégralité de nos éléments texte.

Ajustements CSS

Avant d’intégrer la source de notre vidéo par l’intermédiaire d’une astuce avec le logiciel VLC, nous allons rectifier quelques points CSS au niveau de notre structure HTML tout comme au sein de notre stylesheet CSS.

Dans un premier temps, il est bon de supprimer les marges internes & externes intégrées de base au composant jumbotron :

<div class="jumbotron p-0 m-0"></div>
Pour rappel, les classes p-* et m-* suivies d’un 0 suppriment respectivement les marges internes et externes du conteneur. Pour en savoir plus, découvrez la notion de spacing via la documentation officielle.

Ensuite, nous devons définir une hauteur et largeur minimum à notre vidéo au sein de la structure HTML. Pour définir ces dernières, nous utiliserons la notion de sizing proposée par le framework et plus particulièrement la notion relative aux viewports :

<video class="min-vh-100 min-vw-100"></video>

La classe .min-vh-100 permet de définir une hauteur minimum relative au viewport de 100% et la classe .min-vw-100, une largeur minimum relative au viewport de 100%.

Pour rappel, le viewport représente l’écran final de l’utilisateur affichant votre site web. Cela permet d’afficher un résultat relatif à la taille d’écran d’un smartphone, d’une tablette ou d’un ordinateur.
Coinbase
Acheter et vendre des cryptomonnaies

Coinbase est l’endroit idéal pour acheter, vendre et gérer votre portefeuille de cryptomonnaies. Coinbase est la plateforme numéro 1 dans le monde avec plus de 20 millions d’utilisateurs.

Acheter sur Coinbase

Pour améliorer l’affichage de notre vidéo en arrière plan, il est bon d’ajuster son apparence avec la déclaration de propriétés CSS à l’intérieur de notre stylesheet CSS.

Dans le cas ci-dessous, nous n’avons pas défini d’identifiant propre à notre balise video, libre à vous de le faire pour plus de clarté dans votre code.

video {
  background-size: cover;
  position: fixed;
}

Enfin, pour déplacer le conteneur englobant les textes au centre de la vidéo, nous devons utiliser Flexbox et les classes CSS suivantes :

<div class="card-img-overlay d-flex h-50 flex-column my-auto align-items-center justify-content-center text-center text-white"> ...</div>
  • .d-flex permet de rentre le conteneur display: flex;
  • .h-50 définit la hauteur du contenant à 50% de la hauteur maximale de son conteneur principal : la div jumbotron.
  • .flex-column permet de disposez les différentes balises textes en colonne et de façon à ce qu’il n’y en est une par ligne.
  • .my-auto applique une marge verticale égale en haut et en bas du contenant en fonction de l’espace restant (50% car .h-50) du conteneur principal : la div jumbotron.
  • .align-items-center dispose les div textes au centre du conteneur en respectant leur taille.
  • .justify-content-center aligne verticalement et de manière égale haut et bas les div textes dans leur conteneur.
  • .text-center justifie au centre les textes du conteneur.
  • .text-white applique une couleur blanche aux textes du conteneur.

Astuce : intégration de la source vidéo

Lorsque vous ne disposez pas de suffisamment d’espace libre de stockage sur votre serveur, il est bon de trouver des alternatives. Si vous désirez intégrer une vidéo issue par exemple de services tels que Youtube ou Vimeo sans passer par un <embed> classique, il existe une astuce pour contourner ce problème avec le logiciel gratuit VLC:

  1. Copiez l’adresse URL de la vidéo à intégrer via Youtube ou autre.
  2. Téléchargez VLC si ce n’est pas déjà le cas, et lancez l’application.
  3. Cliquez sur le bouton « Ouvrir un Media », puis sélectionnez l’onglet « Réseau ».
  4. Collez le l’URL de votre vidéo dans l’emplacement adéquat et cliquez sur « Ouvrir ». La vidéo se lance.
  5. Faites ctrl + i ou cmd + i pour afficher les informations.
  6. Copiez l’URL disponible dans « Emplacement ».
  7. Collez l’URL dans la balise source dans src="" et le tour est joué.

Résultat final avec le code HTML/CSS disponible

Tuto.com
Développez vos compétences digitales

Apprenez Bootstrap aux côtés d’experts et artistes passionnés sur tuto.com, une plateforme de formation au digital.

Visiter Tuto.com


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.