¿Cómo insertar vídeos de YouTube en nuestra web (HTML)?

YouTube es una plataforma de contenido digital en la cual puedes encontrar toda clases de vídeos, Youtube ha crecido en todos los aspectos en los últimos años dando opciones para todo inclusive para insertar vídeos fácilmente en nuestra web:

Seleccione un vídeo de YouTube -> clic en "Compartir"-> clic en la pestaña "Insertar"

Una vez que nos hagamos con nuestro vídeo que deseamos insertar en nuestra página web HTML; en nuestro caso, queremos insertar el siguiente vídeo:

<iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0"  allowfullscreen></iframe>

Empleando directamente los vídeos de YouTube podemos ahorrar mucho trabajo; por ejemplo, evitar convertir vídeos en distintos formatos para el soporte de distintos navegadores, las distintas opciones sociales para compartir el vídeo de YouTube, etc.

Analizando los atributos del HTML anterior

Observando el código anterior obtenido desde YouTube, nos damos cuenta que no es más que un simple HTML, específicamente un iframe, con una serie de atributos que veremos a continuación:

• Los atributos width y height para especificar las dimensiones del vídeo.
• El atributo allowfullscreen para habilitar el modo Full Screen o que el vídeo pueda ocupar toda la pantalla.
• Finalmente el atributo src en el cual se coloca la URL del vídeo de YouTube; este es el único atributo que se debe cambiar en caso de querer colocar otro vídeo de YouTube; además del fuente o vídeo a referenciar de Youtube, es posible establecer otros parámetros en la URL:

Parámetros de la URL de los vídeos de YouTube

En esta sección veremos algunos de los principales parámetros a colocar en la URL de los vídeos:

autohide Indican el estado de los controles del vídeo:	Si se establece en cero (0) significa que los controles son siempre visibles: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?autohide=0"   allowfullscreen></iframe> Si se establece en uno (1) significa que los controles se esconden al iniciar la reproducción del vídeo: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?autohide=1"   allowfullscreen></iframe> (Por defecto) Si se establece en dos (2) y dependiendo de las proporciones del vídeo variará el comportamiento de los controles; para la relación de aspecto igual a 16:9 o 4:3 se comportará igual que si se se estableciera el valor en uno, cualquier otra relación de aspecto se comportará como si el valor se estableciera en cero: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?autohide=2"   allowfullscreen></iframe>
autoplay Indica el comportamiento del vídeo al terminar su carga:	(Por defecto) Si se establece en cero (0) significa que el vídeo no inicia automáticamente: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?autoplay=0"   allowfullscreen></iframe> Si se establece en uno (1) significa que el vídeo inicia automáticamente: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?autoplay=1"   allowfullscreen></iframe>
controls Ofrece distintas opciones para indicar el comportamiento de los controles del vídeo:	Si se establece en cero (0) significa que los controles no se muestran; por lo tanto, el reproductor Flash carga automáticamente: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?controls=0"   allowfullscreen></iframe> (Por defecto) Si se establece en uno (1) significa que los controles se muestran y el reproductor Flash se carga automáticamente: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?controls=1"   allowfullscreen></iframe> Si se establece en dos (2) significa que los controles se muestran pero el el reproductor Flash se carga cuando el usuario inicia la reproducción: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?controls=2"   allowfullscreen></iframe>
loop Aquí se especifica si el vídeo debe reproducirse nuevamente una vez culmine (loop:	(Por defecto) Si se establece en cero (0) el vídeo no se reproduce al terminar el mismo: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?loop=0"   allowfullscreen></iframe> Si se establece en uno (1) el vídeo se vuelve a reproducir al terminar el mismo: <iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?loop=1"   allowfullscreen></iframe>
playlist Esta opción permite crear PlayList; para ello debemos separar los vídeos por comas (,).
showinfo Esta opción permite indicar si mostrar (1) o no (0) la información en en título del vídeo:	<iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?showinfo=1"   allowfullscreen></iframe>
disablekb Esta opción permite desactivar (1) o activar (0) los controles de teclado:	<iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?disablekb=1"   allowfullscreen></iframe>
start Permite especificar (en segundos) en base a un valor entero en donde comienza el vídeo; por ejemplo, si quisiéramos comenzar un vídeo en 5 segundos:	<iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?start=5"   allowfullscreen></iframe>
end Permite especificar (en segundos) en base a un valor entero cuando el reproductor se debe detener; por ejemplo, si quisiéramos detener un vídeo en 5 segundos:	<iframe width="560" height="315" src="https://www.youtube.com/embed/85MppyLJHz0?end=5"   allowfullscreen></iframe>

Videos de YouTube adaptables o responsive

Si quieres saber como hacer responsive o adaptables los videos de YouTube puedes consultar la siguiente entrada en la cual tratamos ese tema:

Puedes encontrar la documentación oficial y completa en: Reproductores incorporados de YouTube y parámetros del reproductor.

29-06-2015 - Andrés Cruz

In english

• Categoría
• /
• HTML
• /
• ¿Cómo insertar vídeos de YouTube en nuestra web (HTML)?