Intégrer des vidéos YouTube en HTML

Introduction

La balise HTML <embed> peut être utilisée pour inclure différents types de contenu tels que des images, des vidéos et d'autres pages web dans notre page web. Dans ce laboratoire, nous allons utiliser la balise HTML <embed> pour ajouter une vidéo YouTube à une page web.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Structure du document HTML

Créez un nouveau fichier nommé index.html.

Une fois que vous avez créé votre fichier index.html, ajoutez la structure de base d'un document HTML avec un élément head et body.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML Embed Tag Lab</title>
  </head>
  <body></body>
</html>

Ajouter une vidéo à l'aide de la balise HTML

Pour ajouter une vidéo à votre page web, vous devrez utiliser le code d'incorporation de YouTube.

Accédez à n'importe quelle vidéo sur YouTube.
Sous la vidéo, cliquez sur le bouton "Partager" puis sur le bouton "Incorporer". Cela ouvrira la fenêtre d'incorporation de vidéo.
Copiez le code HTML qui apparaît dans la fenêtre d'incorporation de vidéo.
Collez le code dans votre fichier index.html, à l'intérieur de l'élément <body>.
```
<embed src="https://www.youtube.com/embed/TWfph3iNC-k" />
```

Définir la largeur et la hauteur de la vidéo

Pour éviter les problèmes de dimensionnement, il est important de régler la largeur et la hauteur de la vidéo.

Ajoutez les attributs height et width à votre balise <embed>. L'attribut width définit la largeur de la vidéo, et l'attribut height définit sa hauteur.
```
<embed
  src="https://www.youtube.com/embed/TWfph3iNC-k"
  width="560"
  height="315"
/>
```

Enregistrez le fichier index.html et ouvrez-le dans votre navigateur web pour vérifier que la vidéo a été ajoutée avec succès.

Ajouter une solution de repli pour les navigateurs non pris en charge

Tous les navigateurs ne prennent pas en charge la balise <embed>. Pour vous assurer que votre page web est toujours fonctionnelle pour les utilisateurs ayant des navigateurs non pris en charge, vous pouvez ajouter une option de repli.

Ajoutez la balise <object> avec des paramètres spécifiant le type de contenu intégré et l'URL de la ressource à intégrer.

<object
  type="text/html"
  data="https://www.youtube.com/embed/TWfph3iNC-k"
  width="560"
  height="315"
>
  <p>
    Votre navigateur ne prend pas en charge l'élément Vidéo HTML5. Merci de
    mettre à jour vers un navigateur moderne.
  </p>
</object>

Enregistrez le fichier index.html et ouvrez-le dans un navigateur qui ne prend pas en charge la balise <embed>, tel qu'Internet Explorer. Vérifiez que l'option de repli fonctionne.

Résumé

Félicitations ! Vous avez appris avec succès à ajouter une vidéo à une page web à l'aide de la balise HTML <embed>. N'oubliez pas de vérifier la prise en charge des navigateurs et d'utiliser l'option de repli si nécessaire.

Contenu/Plugin externe HTML