En este artículo os voy a explicar cómo personalizar un reproductor de YouTube embebido utilizando los parámetros que el propio reproductor nos otorga. Hoy en día, la mayoría de desarrolladores embeben vídeos de YouTube mediante el tag iframe ya que esto mejora la experiencia del usuario.
¿Sabías que podías no mostrar vídeos relacionados al mostrado una vez finalice el vídeo? ¿Sabías que puedes quitar el logo de YouTube del reproductor? Te explicaremos todo esto y mucho más en este artículo sobre cómo personalizar un reproductor de YouTube embebido.
autoplay
Puedes reproducir automáticamente el vídeo utilizando esto:
0 = No se reproduce automáticamente el vídeo (valor por defecto)
1 = Se reproduce automáticamente el vídeo
<iframe src="https://www.youtube.com/embed/HIsKF943vTk?autoplay=1" frameborder="0" allowfullscreen width="570" height="315" ></iframe>
rel
Usando este parámetro puedes impedir que se muestren vídeos relacionados una vez termine:
0 = No se muestran vídeos relacionados al terminar el vídeo reproducido
1 = Se muestran vídeos relacionados al terminar el vídeo reproducido (valor por defecto)
<iframe src="https://www.youtube.com/embed/HIsKF943vTk?rel=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>
showinfo
Muestra información del vídeo como el título y el nombre del canal que lo ha subido:
0 = Antes de que el vídeo empiece a reproducirse, muestra información como el título del vídeo y el canal que lo ha subido. (valor por defecto)
1 = No muestra ninguna información
<iframe src="https://www.youtube.com/embed/HIsKF943vTk?showinfo=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>
controls
0 = El reproductor se carga inmediatamente y los controles no se muestran
1 = El reproductor y los controles se muestran inmediatamente (valor por defecto)
2 = Los controles se muestran y el reproductor carga una vez que el usuario inicie el vídeo
<iframe src="https://www.youtube.com/embed/HIsKF943vTk?controls=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>
modestbranding
0 = No muestra el logo de YouTube en la barra de control
1 = Muestra el logo de YouTube en la barra de control (valor por defecto)
<iframe src="https://www.youtube.com/embed/HIsKF943vTk?modestbranding=1" frameborder="0" allowfullscreen width="570" height="315" ></iframe>
color
red (por defecto) o white. Puedes cambiar el color de la barra de progreso entre rojo o blanco. Ojo, si modificas el parámetro color a blanco, desactivarás la opción que hayas configurado en el modestbranding.
<iframe src="https://www.youtube.com/embed/HIsKF943vTk?color=white" frameborder="0" allowfullscreen width="570" height="315" ></iframe>
cc_load_policy
0 = Valor por defecto que depende de las preferencias del usuario
1 = Desactiva los subtítulos que se muestran por defecto
<iframe src="https://www.youtube.com/embed/HIsKF943vTk?cc_load_policy=1" frameborder="0" allowfullscreen width="570" height="315" ></iframe>
disablekb
0 = No permite al usuario manejar el reproductor con las teclas del teclado (valor por defecto)
1 = Permite al usuario manejar el reproductor con las teclas del teclado
<iframe src="https://www.youtube.com/embed/HIsKF943vTk?disablekb=1" frameborder="0" allowfullscreen width="570" height="315" ></iframe>
iv_load_policy
1 = Las anotaciones del vídeo se muestran por defecto (valor por defecto)
3 = No se muestran las anotaciones de los vídeos
<iframe src="https://www.youtube.com/embed/HIsKF943vTk?iv_load_policy=3" frameborder="0" allowfullscreen width="570" height="315" ></iframe>
end
Especifica en segundos, cuándo debe parar de reproducirse un vídeo desde el inicio del mismo. Es decir, si especificamos como valor 10, el vídeo solo durará 10 segundos desde el inicio.
<iframe src="https://www.youtube.com/embed/HIsKF943vTk?end=10" frameborder="0" allowfullscreen width="570" height="315" ></iframe>
fs
0 = No mostrará el botón de pantalla completa en el reproductor
1 = Mostrará el botón de pantalla completa en el reproductor (valor por defecto)
<iframe src="https://www.youtube.com/embed/HIsKF943vTk?fs=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>
loop
0 = El vídeo se reproducirá una sola vez (valor por defecto)
1 = El vídeo se reproducirá en bucle
<iframe src="https://www.youtube.com/embed/HIsKF943vTk?fs=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>
start
Especifica en segundos, cuándo debe empezar a reproducirse un vídeo desde el inicio del mismo. Es decir, si especificamos como valor 10, el vídeo empezará en el segundo 10.
<iframe src="https://www.youtube.com/embed/HIsKF943vTk?start=10" frameborder="0" allowfullscreen width="570" height="315" ></iframe>
Fuente: 9lessons.info