Intégrer une vidéo responsive avec Bootstrap 4

Nous avons déjà parlé de l’intégration responsive de vidéo avec Bootstrap sur MonBootstrap. Cependant, l’article date un peu et il est grand temps de mettre votre pratique à jour.

Les différents ratios disponibles

Bootstrap propose par défaut une liste de ratios permettant d’afficher votre vidéo avec le ratio qui vous semble le plus approprié.

 
$embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (4 3),
  (1 1)
) !default;

La classe embed-responsive

Pour intégrer une vidéo en responsive sur votre site web, il faut commencer par utiliser une div principale portant la classe embed-responsive qui englobera votre contenu.

<div class="embed-responsive">
...
</div>

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

Votre vidéo dans une <iframe>

Après avoir défini votre div principale qui englobera votre vidéo, nous devons intégrer la balise <iframe> qui contiendra la source de la vidéo, ses options et autres paramètres.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..." options=""></iframe>
</div>

Bien entendu, la source se traduit par le lien URL de votre vidéo Youtube. Les options et autres paramètres sont eux utilisés en fonction de vos besoins comme par exemple la possibilité de laisser l’utilisateur mettre la vidéo en plein écran avec allowfullscreen

Intégrer une vidéo responsive en 16/9

Le 16/9 (seize neuvième) est le format le plus utilisé aujourd’hui sur le web. La plus part des écrans modernes proposent un affichage sur ce ratio.

Pour utiliser ce ratio, vous devez appliquer la classe embed-responsive-16by9 au niveau de votre conteneur div principale :

<div class="embed-responsive embed-responsive-16by9">
...
</div>

Les différents ratios peuvent facilement êtres intégrés en suivant le modèle de la classe embed-responsive-16by9 en changeant le suffixe 16by9 par 21by9 ou encore 4by3.

Les différents ratios intégrés

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Comme mentionné plus haut, il est extrêmement simple d’utiliser les ratios en modifiant uniquement le suffixe de votre classe CSS.

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

Un exemple de vidéo responsive intégrée en 16/9

Bootstrap et sa simplicité 😉

Astuce : Intégrer une vidéo dans une modal

Depuis Bootstrap 3, il est possible d’intégrer une vidéo dans une modal Bootstrap. La documentation officielle rappelle tout de même qu’il vous faudra ajouter du code JavaScript supplémentaire pour arriver à vos fins sur la gestion de la vidéo.