En este post te enseñaré cómo incorporar un vídeo de YouTube en una página web.

Siempre buscamos la manera de colocar un enlace de YouTube en el src de una etiqueta <video> pero eso no es posible por el momento, solo que siempre hay una solución y es la que te mostraré en el post.

Forma fácil

La forma más sencilla es ir al vídeo en cuestión, darle a Compartir > Incorporar y copiar y pegar el código. Sin embargo, si quieres algo manual, sigue leyendo.

Obteniendo el enlace

Lo primero que debes tener es el enlace del vídeo de YouTube. Aquí un ejemplo: https://www.youtube.com/watch?v=m-gj-4mT2E8

En este caso el ID es m-gj-4mT2E8

Ahora hay que colocar ese id después de https://www.youtube.com/embed/ de modo que nuestro link queda así: https://www.youtube.com/embed/m-gj-4mT2E8

Lo único que cambia es el código del final. Ahora ten a la mano ese enlace.

El iframe

Incorporar vídeo de YouTube en HTML con iframe

Como lo dije, no es posible embeber el vídeo de YouTube en un <video> de HTML 5 pero sí es posible hacerlo en un iframe. Para ello crea un iframe y coloca el src en el enlace que vimos anteriormente.

En mi caso he colocado el iframe además de indicar el alto, ya que el ancho es del 100 %. Por otro lado le he removido los bordes y el código completo queda así:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Incorporar vídeo de YT en HTML - By Parzibyte</title>
  </head>
  <body>
		<h1>Mira mi vídeo :)</h1>
		<iframe style="border: none" src="https://www.youtube.com/embed/m-gj-4mT2E8" height="500px" width="100%"></iframe>
  </body>
</html>
Si el post ha sido de tu agrado te invito a que me sigas para saber cuando haya escrito un nuevo post, haya actualizado algún sistema o publicado un nuevo software. Facebook | X | Instagram | Telegram | También estoy a tus órdenes para cualquier contratación en mi página de contacto