Intégrer une vidéo responsive avec Bootstrap 4

Intégrer des médias vidéos est de plus en plus commun avec l’essor de plate-formes telles que Youtube aujourd’hui. Rien de plus simple avec Bootstrap pour intégrer une vidéo Youtube sur votre blog ou votre site web.

Posté le par Benoît Philibert|5917 vues

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;
À noter qu’il est possible de modifier, supprimer ou ajouter le ratio de votre choix directement dans le fichier _variables.scss.

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>
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

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.

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

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.

Pour en savoir plus, découvrez le poste Stackoverflow qui traite de la pratique sur l’intégration d’une vidéo Youtube dans une modal Bootstrap.


Ces articles pourraient vous intéresser

Tags

1 commentaire

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.