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

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 CoinbaseVotre 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.comUn 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.
1 commentaire
Intégrer une vidéo de manière responsive - monbootstrap.fr
[…] Un article plus récent traitant de l’intégration de vidéo responsive est disponible. […]