HTML 5 - 5.4 : Comment incorporer des vidéos et du contenu
Incorporer des vidéos dans une page web est simple avec HTML. La plupart des plates-formes vidéo comme YouTube et Facebook offrent des codes d'intégration prêts à l'emploi. Pour YouTube, il suffit d'accéder à la vidéo, de cliquer sur « Partager », puis « Intégrer » pour copier le code d'une balise <iframe>. Ce code contient déjà les dimensions et les options appropriées. Vous pouvez personnaliser la taille en modifiant les attributs width et height de l'iframe, par exemple en mettant la largeur à 560 pixels et la hauteur à 315 pixels.
Facebook propose une démarche similaire : ouvrez la vidéo, cliquez sur les trois points en haut à droite, sélectionnez « Intégrer à un site », puis copiez le code d'intégration. Vous pouvez choisir d'inclure toute la publication (y compris commentaires et légendes) ou uniquement la vidéo. Ces codes iframe ajoutent la vidéo directement à votre page sans compromettre la structure HTML.
Le même processus fonctionne pour d'autres plate-formes vidéo : Twitter, Instagram, Dailymotion, Vimeo et bien d'autres offrent des codes embed similaires. Il vous suffit de trouver le bouton de partage ou d'intégration et de copier le code HTML fourni. Vous pouvez ensuite redimensionner l'iframe selon vos besoins pour qu'il s'adapte à la mise en page de votre site.
L'avantage de cette approche est qu'elle délègue la responsabilité du lecteur vidéo à la plateforme source. Cela signifie que les mises à jour de lecture, de sécurité et de contenu sont gérées par la plate-forme, et vous n'avez pas à maintenir l'infrastructure vidéo vous-même.
En résumé
Cette leçon HTML5 montre comment intégrer des vidéos provenant de plateformes comme YouTube et Facebook directement dans vos pages web. Vous apprendrez à récupérer le code d'intégration via les fonctionnalités de partage de ces plateformes et à l'adapter à votre site. Le cours couvre également la personnalisation des options d'intégration et le redimensionnement des vidéos pour s'adapter à votre mise en page.
Points clés
- Intégration YouTube : utilisez le bouton « Partager » > « Intégrer » pour obtenir le code d'intégration qui s'affiche en quelques clics
- Intégration Facebook : accédez au menu (trois points) de la vidéo et sélectionnez « Intégrer à un site » pour récupérer le code personnalisé
- Options d'intégration : vous pouvez afficher les commandes du lecteur, activer le mode de confidentialité et choisir d'inclure les publications ou seulement la vidéo
- Redimensionnement des vidéos : ajustez les paramètres de largeur (width) pour adapter les vidéos à votre mise en page
- Processus universel : le même système de copie-collage fonctionne avec d'autres plateformes comme Twitter, Instagram et Dailymotion
Questions fréquentes
Comment intégrer une vidéo YouTube dans une page HTML ?
Rendez-vous sur YouTube, sélectionnez la vidéo souhaitée, cliquez sur le bouton « Partager » puis sur « Intégrer », copiez le code d'intégration fourni et collez-le dans votre page HTML.
Comment modifier la taille d'une vidéo intégrée sur mon site ?
Vous pouvez modifier les attributs de largeur (width) et de hauteur dans le code d'intégration pour adapter les dimensions de la vidéo à votre mise en page et au design de votre site.
Quelles autres plateformes vidéo peuvent être intégrées sur une page HTML ?
Au-delà de YouTube et Facebook, vous pouvez intégrer des vidéos provenant de Twitter, Instagram et Dailymotion en suivant le même processus de récupération et de copie-collage du code d'intégration.