CATALOGUE Code & Data Formation Bootstrap Apprendre Bootstrap Ajouter des iframes responsives pour vidéos

Ajouter des iframes responsives pour vidéos

Insérer une vidéo en responsive (embed)

Vidéo non disponible ! Réessayez plus tard

2h 58min

23 leçons

4,0

Transcription

49,90€ Je commande

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

PRO : J'en fait profiter mon équipe

DescriptionProgrammeAvis

2h 58min

23 leçons

4,0

49,90€ Je commande

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

PRO : J'en fait profiter mon équipe

Tutoriel détaillé sur l'intégration de vidéos responsives

Objectifs

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

Résumé

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

Description

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.

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.

Programme détaillé

Accueil de la formation

Module 1 - Introduction

Présentation de Bootstrap et de la formation 02:05

Découvrir les outils nécessaires 03:55

Télécharger et découvrir les fichiers de Bootstrap 03:53

Différentes façons de charger Bootstrap 07:30

Module 2 - Explication de la grille

Découvrir la logique de Bootstrap 14:57

Savoir utiliser les préfixes xs - sm - md -lg 07:10

Découvrir les autres class 09:32

Module 3 - Mettre du style

Personnaliser facilement le texte 10:26

Styliser vos tableaux 07:10

Utiliser les boutons déjà stylisés 09:12

Découvrir toutes les class très pratiques 12:02

Gérer le responsive uniquement avec des class 07:05

Module 4 - Utiliser les composants prêt à l’emploi

Construire un menu responsive 14:20

Insérer des icônes 03:56

Mettre en place un Beadcrumbs et une pagination 10:12

Ajouter des label et badges 03:32

Insérer une vidéo en responsive (embed) 04:47

Module 5 - Utiliser les composants JavaScript

Présentation de la logique de fonctionnement commune 03:26

Afficher des modals 05:02

Afficher des tooltip et popover dans votre contenu 08:36

Gérer l’affichage du contenu avec les Tabs et Collapse 13:20

Ajouter et configurer un carousel 11:34

Utiliser le scrollspy pour activer les éléments du menu en fonction du scroll 04:54

1 commentaire

4,0

1 vote

stephd

Il y a 4 years

Commentaire

tres bonne formation c est une bonne decouverte generale.