L’insertion des vidéos UTILITAIRES:Vidéo VIDÉO:Insérer

Le multimédia a pris depuis longtemps une place importante dans les sites web. Bootstrap permet d’insérer facilement des vidéos dans un conteneur responsive.

L’exemple de ce titre est à télécharger dans le dossier nommé 12-Utilitaires-05.

Voici le code utilisé dans cet exemple :

<div class="embed-responsive embed-responsive-16by9"> 
    <iframe width="560" height="315" 
src="https://www.youtube.com/embed/
Go9dx0ph5Kw" frameborder="0" allow="autoplay; 
encrypted-media" allowfullscreen></iframe>
</div> 

Le conteneur est une boîte <div> utilisant la classe .embed-responsive. La deuxième classe, .embed-responsive-16by9 permet de conserver le ratio 16/9 de la vidéo initiale. Vous pouvez utiliser les ratios 21/9 avec le suffixe 21by9, 4/3 avec le suffixe 4by3 et un affichage carré avec le suffixe .1by1.

Voici l’affichage obtenu sur un écran large :

images/24C12-001.png

Voici l’affichage obtenu sur un petit écran :

images/24C12-002.png
Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Changer l’affichage des éléments
Suivant
Les images de remplacement