Ajouter des iframes responsives pour vidéos

Insérer une vidéo en responsive (embed)
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Bootstrap - Le Framework Front-End
Revoir le teaser Je m'abonne
2,5
Transcription

Cette leçon fait partie de la formation
49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
2,5
Cette leçon fait partie de la formation
49,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Apprendre à intégrer des iframes responsives pour des contenus vidéo dans un site web.

Cette leçon rapide explique comment ajouter un iframe responsif pour intégrer des vidéos de plateformes comme Vimeo et YouTube.

Dans cette leçon, nous allons apprendre à insérer un iframe responsif pour intégrer une vidéo dans la sidebar de votre site web. Nous abordons les étapes pour faire en sorte que la vidéo s'adapte automatiquement à la taille du conteneur, assurant ainsi une visualisation optimale sur tous les appareils. Nous montrons comment créer une div pour la vidéo, puis comment récupérer le code iframe depuis Vimeo.

Ensuite, nous envelopperons cet iframe dans une autre div avec les classes de Bootstrap appropriées pour définir le ratio de la vidéo (4:3 ou 16:9). Enfin, nous discuterons de l'utilisation de feedvids.js pour éliminer les bandes noires autour de la vidéo, rendant ainsi votre contenu vidéo parfaitement intégré et agréable à regarder.

Cette technique est applicable non seulement pour les vidéos, mais aussi pour d'autres contenus intégrés comme des présentations PowerPoint ou des pages web.

Voir plus
Questions réponses
Pourquoi est-il important de rendre un iframe responsif?
Pour s'assurer que le contenu vidéo s'adapte automatiquement à la taille de l'écran, offrant une meilleure expérience utilisateur.
Quelles classes Bootstrap sont utilisées pour rendre une vidéo responsive?
Les classes "embed-responsive" pour l'encadrement et "embed-responsive-item" pour l'iframe lui-même.
Quel ratio de vidéo est recommandé pour éviter les bandes noires?
Utiliser le ratio 16:9 est recommandé pour éviter les bandes noires.
2 commentaires
2,5
2 votes
5
4
3
2
1
ideal.micro40
Il y a 1 semaine
video sur Bootstrap 3 alors qu'on est sur la version 5.3.6.
on parle de jquery alors que dans la version il n'y est plus
on nous parle de phpstorm comme editeur qui est payant voir lez bloc note (au secours !!!)
il y a vscode qui maintenant est utiliser par quasi tous les développeurs et qui est gratuit.

sur la video : Maîtriser les Grilles et Colonnes dans Bootstrap
1 - le cours annonce la modification pour passer sur 4 colonne puis de changer les titres,
a ce moment la on reviens en arrière à la modification pour passer en 4 colonnes... et ça recommence
grosse erreur de montage.

2 - ensuite push et pull ont été supprimé pour utiliser le système flexbox sur la version 5
avec les classes order pour gérer l'ordre des colonnes.

3 - l'explication sur le offset n'est absolument pas claire :
on a une première explication, puis une deuxième qui est la même mais avec le résultat directe avec offset.

bref je vais être franc j'ai trouver une formation sur udemy sur bootstrap 5 bien plus intéressante, je ne trouve pas normal d'avoir une formation sur bootstrap 3 qui nous induit en erreur.
ayant passer ce premier chapitre j’arrête car je ne vois aucun intérêt à continuer.
Stephd
Il y a 4 ans
tres bonne formation c est une bonne decouverte generale.