DROPCODING BLOG

Como Insertar un Vídeo de YOUTUBE en HTML

Hoy toca un tutorial muy facilito. Vamos a Insertar un vídeo de Youtube (embebido) en un archivo HTML. Y cuando digo HTML me refiero también a insertarlo en un CMS como WordPress por ejemplo, o en general, cualquier sitio que permita el uso de HTML.

Esto de incrustar un vídeo de YouTube es realmente fácil y rápido de hacer. Así que presta atención, no vaya ser que te lo pierdas, porque vamos a ir muy rápido.

Insertar Vídeo de Youtube en HTML

Lo primero que vamos a hacer es ir a YouTube y buscaremos el vídeo que queremos incrustar. Una vez localizado el vídeo vamos a darle al botón de compartir, que está entre el botón de like y el botón de descarga.

Se abrirá una una ventana con diferentes opciones para compartir el vídeo. Seleccionaremos la primera opción, la de «Insertar».

Cuando le des al botón de «Insertar» aparecerá otra ventana con el código <iframe> a la derecha. Lo copiaremos seleccionándolo. O también le podemos dar al botón de copiar (en la parte inferior derecha).

Ahora, tan solo quedará pegarlo en nuestro archivo HTML.

(Te dejo por aquí el vídeo)

Personalización de Vídeo Embebido de Youtube

Existen ciertos parámetros que podemos utilizar para personalizar la presentación de estos vídeos incrustados.

Por ejemplo, si queremos no se muestren los controles del vídeo(la barra de abajo) colocaremos el siguiente parámetro en la url del iframe.

/?controls=0

Quedaría algo así, por ejemplo.

<iframe width="560" height="315" src="https://www.youtube.com/embed/0k5P1SCiybg/?controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Si quieres que el vídeo se reproduzca automáticamente, cuando el usuario entre a la página escribiremos el siguiente parámetro.

/?autoplay=1

En este caso le colocamos un 1 al final, le indicamos la opción «verdadera o afirmativa» en este caso, como un booleano.

Si te interesa conocer más opciones de personalización, te dejo por aquí la página oficial de Google donde se explican todos los parámetros de reproducción de vídeos de Youtube.

Apúntate a la Newsletter y Mejora tus Habilidades

Conoce los secretos mejor guardados sobre el Diseño y el Desarrollo Web.

Suscríbete

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *