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.
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.
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.
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>
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.