Incluir videos de YouTube en HTML

Introducción

La etiqueta HTML <embed> se puede utilizar para incluir varios tipos de contenido, como imágenes, vídeos y otras páginas web, en nuestra página web. En este laboratorio, usaremos la etiqueta HTML <embed> para agregar un video de YouTube a una página web.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Estructura del documento HTML

Crea un nuevo archivo llamado index.html.

Una vez que hayas creado tu archivo index.html, agrega la estructura básica de un documento HTML con un elemento head y body.

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

Agregar un video utilizando la etiqueta HTML

Para agregar un video a tu página web, necesitarás utilizar el código de inserción de YouTube.

Navega a cualquier video en YouTube.
Debajo del video, haz clic en el botón "Compartir" y luego en el botón "Insertar". Esto abrirá la ventana Insertar video.
Copia el código HTML que aparece en la ventana Insertar video.
Pega el código en tu archivo index.html, dentro del elemento <body>.
```
<embed src="https://www.youtube.com/embed/TWfph3iNC-k" />
```

Establecer el ancho y la altura del video

Para evitar problemas de dimensionamiento, es importante establecer el ancho y la altura del video.

Agrega los atributos height y width a tu etiqueta <embed>. El atributo width define el ancho del video, y el atributo height establece su altura.
```
<embed
  src="https://www.youtube.com/embed/TWfph3iNC-k"
  width="560"
  height="315"
/>
```

Guarda el archivo index.html y ábralo en tu navegador web para verificar que el video se ha agregado correctamente.

Agregar una alternativa para navegadores no compatibles

No todos los navegadores admiten la etiqueta <embed>. Para asegurarse de que tu página web siga funcionando para los usuarios con navegadores no compatibles, puedes agregar una opción alternativa.

Agrega la etiqueta <object> con parámetros que especifiquen el tipo de contenido incrustado y la URL del recurso que se va a incrustar.

<object
  type="text/html"
  data="https://www.youtube.com/embed/TWfph3iNC-k"
  width="560"
  height="315"
>
  <p>
    Su navegador no admite el elemento de video HTML5. Por favor, actualice a
    un navegador moderno.
  </p>
</object>

Guarda el archivo index.html y ábralo en un navegador que no admita la etiqueta <embed>, como Internet Explorer. Verifica que la opción alternativa funcione.

Resumen

¡Felicidades! Has aprendido con éxito cómo agregar un video a una página web utilizando la etiqueta HTML <embed>. No olvides comprobar la compatibilidad con los navegadores y utilizar la opción alternativa si es necesario.

Contenido/Plugin externo de HTML