Personaliza el reproductor de YouTube

Personalizar Reproductor Youtube

YouTube permite establecer ciertos parámetros en su reproductor para que realice funciones extra. Todos estos parámetros que les muestro a continuación son opcionales, pero pueden llegar a ser útiles:


Para iniciar, deben conocer donde colocar los parámetros:

<iframe 
width="560" 
height="315" 
src="https://www.youtube.com/embed/nnZeDt2c8Yo" 
frameborder="0" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>

Este es el código inicial que les da YouTube, para que funcionen los parámetros deberán ponerlos justo después de la URL de YouTube y antes de las comillas.

  • El primer parámetro que pongan irá antecedido de un ? (signo de interrogación)
  • Los siguientes parámetros irán antecedidos de un & (ampersand)
  • No debe haber espacios

Parámetros

controls

Indica si los controles del reproductor se muestran:

  • controls=0 – No se muestran controles.
  • controls=1 (por defecto) – Se muestran los controles.

autoplay

Si su valor es uno reproducirá automáticamente el video cuando se haya cargado la página:

  • autoplay=0 (por defecto) – No se reproduce automáticamente.
  • autoplay=1 – Se reproduce automáticamente.

disablekb

Si se pone en valor 1 (disablekb=1) deshabilitará los controles por medio de teclado, es decir:

  • Barra espaciadora: Play / Pause
  • Flecha izquierda: Retroceder 5 segundos
  • Flecha derecha: Adelantar 5 segundos
  • Flecha arriba: Subir el volumen
  • Flecha abajo: Bajar el volumen
  • [f]: Habilitar pantalla completa
  • [j]: Retroceder 10 segundos
  • [l]: Retroceder 10 segundos
  • [m]: Silenciar el video
  • [0-9]: Saltar a un punto en el video. 0 salta al inicio, 1 salta al 10%, 2 salta al 20% y así sucesivamente.

fs

Activa o desactiva la opción de pantalla completa:

  • fs=0 – Desactiva pantalla completa
  • fs=1 (por defecto) – Activa pantalla completa

loop

Dependiendo del valor hará que el video se repita indefinidamente:

  • loop=0 (por defecto) – No repite
  • loop=1 – Repite indefinidamente

modestbranding

Si su valor es 1 evitará que el logo de YouTube sea mostrado en la barra de controles:

  • modestbranding=1 – Evita que el logo de YouTube se muestre

rel

Dependiendo del valor que se le asigne mostrará o no videos relacionados una vez terminada la reproducción:

  • rel=0 – Muestra videos relacionados del mismo canal

Nota: El comportamiento de este valor fue cambiado desde el 2018, antes permitía ocultar por completo videos relacionados.

iv_load_policy

Define si las anotaciones se muestran o no en el video:

  • iv_load_policy=1 (por defecto) – Muestra anotaciones
  • iv_load_policy=3 – Oculta anotaciones

start

Indicará en qué segundo del video comenzará la reproducción:

  • start=X (donde X es un número entero positivo)

cc_lang_pref

Especifica el lenguaje por defecto para los subtítulos. El lenguaje se indica con dos letras según la codificación ISO 639-1:

  • cc_lang_pref=es – Muestra subtítulos en Español

cc_load_policy

Hace que se muestren los subtítulos en el video, incluso si el usuario tiene los subtítulos desactivados por defecto:

  • cc_load_policy=1 – Habilita los subtítulos

Ejemplo

Por último les dejo un ejemplo con algunos parámetros combinados:

  • disablekb
  • start
  • modestbranding
  • rel

Antes de la parametrización:

<iframe 
width="560" 
height="315" 
src="https://www.youtube.com/embed/6kAvCSMkYEI" 
frameborder="0" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen>
</iframe>

Después de la parametrización:

<iframe 
width="560" 
height="315" 
src="https://www.youtube.com/embed/6kAvCSMkYEI?disablekb=1&start=535&modestbranding=1&rel=0" 
frameborder="0" 
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
allowfullscreen>
</iframe>

 [Fuente: developers.google.com] Actualizado en Agosto de 2020

Autor: atrumgeost

Technology, design, and WordPress enthusiast. Cats, anime, music and podcasts on a day-to-day basis.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s