Skip to Content
Reproductor de vídeo (embed)Configuración

El reproductor de video incrustado de Ignite Video

Además de usar nuestra API completa para construir tu propio reproductor de video, la forma más habitual de integrar vídeos de Ignite es usar nuestro reproductor de video en iFrame integrable.

1. URL del iframe del reproductor

Puedes copiar y pegar el fragmento HTML del iframe desde tu interfaz de administración de Ignite o crear tú mismo la URL del iframe siguiendo una lógica sencilla. Primero necesitas construir tu URL base de inserción.

Tu URL base:

https://[YOUR-IGNITE-DOMAIN]/player/index.html?id=[VIDEO-ID]

Ejemplo:

https://play.ignite.video/player/index.html?id=6703e05251543798059613b3

2. Configurar el reproductor

Puedes configurar el comportamiento y la apariencia del reproductor añadiendo parámetros de consulta a la URL de inserción.

Todos los parámetros son opcionales y tienen valores predeterminados razonables. Puedes combinar varios parámetros separándolos con & en tu URL:

?id=[VIDEO-ID]&autoplay=true&muted=true&colorPrimary=FF5500

Las opciones disponibles se organizan en las siguientes categorías:

  • Reproducción — Controla cómo se reproduce el video (autoplay, loop, muted, limitQuality)
  • Controles — Configura la interfaz del reproductor (controls, fullscreen, pip, airPlay, googleCast)
  • Subtítulos e idioma — Ajustes de subtítulos y localización (initCaptions, showTranscription, lang)
  • Apariencia — Personaliza el aspecto (fit, uiRadius, uiPadding, colorPrimary, colorSecondary, colorBackground)

controls

  • Type: boolean
  • Default: true

Muestra u oculta la barra de control.

loop

  • Type: boolean
  • Default: false

Repite la reproducción del video. Cuando está activado, el video se reinicia automáticamente desde el principio al terminar.

muted

  • Type: boolean
  • Default: false

Inicia el video silenciado. Suele ser necesario junto con autoplay por las políticas de reproducción automática del navegador.

autoplay

  • Type: boolean
  • Default: false

Inicia el video automáticamente al cargar el reproductor. Ten en cuenta que la mayoría de navegadores exigen que el video esté muted para que la reproducción automática funcione.

fit

  • Type: string
  • Default: contain
  • Values: contain, cover

Cambia cómo se ajusta el video dentro del marco del reproductor.

  • contain — El video se escala para caber dentro del reproductor manteniendo su relación de aspecto. Puede dejar bandas negras.
  • cover — El video se escala para cubrir todo el área del reproductor manteniendo su relación de aspecto. Puede recortarse.

initCaptions

  • Type: boolean
  • Default: false

Cuando está activado, los subtítulos serán visibles por defecto al cargar el reproductor.

showTranscription

  • Type: boolean
  • Default: false

Muestra un botón de transcripción en la barra de control para que los usuarios puedan ver la transcripción del video.

uiRadius

  • Type: number
  • Default: 10

Radio del borde (en píxeles) de los controles del reproductor. Usa 0 para esquinas rectas.

uiPadding

  • Type: number
  • Default: 12

Relleno (en píxeles) entre los controles del reproductor y los bordes del reproductor.

colorPrimary

  • Type: string (hex o rgba)
  • Default: D90B5A

Color de resaltado de los elementos de la interfaz. Se usa en estados activos, barras de progreso y elementos interactivos. Indica valores hexadecimales sin el prefijo #, o usa el formato rgba().

colorSecondary

  • Type: string (hex o rgba)
  • Default: FFFFFF

Color base de los elementos de la interfaz. Se usa para iconos y texto en la barra de control.

colorBackground

  • Type: string (hex o rgba)
  • Default: 000000

Color de fondo de los elementos de la interfaz. Admite transparencia con el formato rgba() (p. ej., rgba(0,0,0,0.25)).

fullscreen

  • Type: boolean
  • Default: true

Permite reproducir el video a pantalla completa. Si está desactivado, se ocultará el botón de pantalla completa.

pip

  • Type: boolean
  • Default: false

Permite usar el modo Picture-in-Picture. Si está activado, el usuario puede extraer el video a una ventana flotante.

airPlay

  • Type: boolean
  • Default: false

Permite enviar el video por AirPlay (dispositivos Apple).

googleCast

  • Type: boolean
  • Default: false

Permite enviar el video con Google Cast (Chromecast).

lang

  • Type: string
  • Default: Configuración del navegador

Fuerza el idioma de la interfaz y el idioma por defecto de los subtítulos. Usa códigos de configuración regional estándar (p. ej., en-US, de-DE, fr-FR).

limitQuality

  • Type: string
  • Default: 1080p
  • Values: 2160p, 1080p, 720p, 540p, 360p, 240p

Limita la calidad máxima transmitida del video. Útil para gestionar el ancho de banda o restringir opciones de calidad en determinados casos de uso.

Ejemplo de parámetros de consulta:

&controls=true&loop=true&muted=true&autoplay=true&fit=cover&fullscreen=false&colorPrimary=00FF00&colorSecondary=FFFFFF&colorBackground=rgba(0,0,0,0.25)&uiRadius=0&uiPadding=0

3. Crear el iframe

Crea un elemento iframe en tu HTML y asigna el atributo src a la URL que construiste en el paso anterior. Es importante definir algunos atributos de estilo para que el reproductor se vea y se comporte como quieras.

<iframe 
  id="ignite-video-player" 
  src="https://play.ignite.video/player/index.html?id=6703e05251543798059613b3&controls=true&loop=true&muted=true&autoplay=true&fit=cover&fullscreen=false&colorPrimary=00FF00&colorSecondary=FFFFFF&colorBackground=rgba(0,0,0,0.25)&uiRadius=0&uiPadding=0" 
  width="640" 
  height="360" 
  frameborder="0"  
  style="width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto;"
></iframe>

Ejemplo en vivo

Aquí tienes un ejemplo en vivo del reproductor en acción:

IntroducciónAPI del reproductor