Accueil Formations Apprendre CSS 3

Comment intégrer une vidéo YouTube dans une page HTML

Retour à la formation
Chapitre 50 Leçon 5
Précédent
Suivant

Découvrez comment insérer des vidéos YouTube ou Vimeo dans votre page HTML en utilisant la balise iframe.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons voir comment intégrer une vidéo existante sur le web dans votre page HTML en utilisant la balise iframe. Plutôt que d'incorporer directement la source de la vidéo, nous allons embarquer une vidéo disponible sur des plateformes telles que YouTube ou Vimeo. Cela permet de diffuser du contenu vidéo sans avoir à héberger la vidéo soi-même.

Nous explorerons comment copier le code iframe fourni par YouTube ou Vimeo et l'insérer dans votre code HTML. Nous verrons également comment ajuster les attributs largeur et hauteur pour garantir que la vidéo s'affiche correctement sur votre page. Nous aborderons les différents attributs de la balise iframe, tels que src, autoplay, et allowfullscreen, ainsi que le retrait de l'attribut frameborder pour éviter les erreurs CSS.

Enfin, nous apprendrons à styliser notre iframe avec CSS pour supprimer les bordures et ajouter des marges.

Objectifs de cette leçon

À la fin de cette vidéo, vous serez capable d'intégrer des vidéos YouTube ou Vimeo dans une page HTML, de personnaliser leur affichage et de les styliser avec CSS.

Prérequis pour cette leçon

Avoir des connaissances de base en HTML et CSS.

Métiers concernés

Les compétences développées dans cette leçon sont utiles pour les développeurs web, les créateurs de contenu en ligne, et les gestionnaires de sites web.

Alternatives et ressources

D'autres méthodes pour intégrer des vidéos incluent l'utilisation des balises video et object.

Questions & Réponses

L'utilisation de la balise iframe permet d'intégrer des vidéos hébergées sur des plateformes comme YouTube sans avoir à les héberger soi-même.
L'attribut frameborder génère des erreurs dans le code CSS car il n'est plus autorisé aujourd'hui.
On peut ajuster la taille de la vidéo en modifiant les attributs de largeur et de hauteur de la balise iframe.