Skip to Content
Video player (embed)Setup

The Ignite Video Embed Player

Besides using our extensive API to build your own video player, the most common way to integrate videos from Ignite is to use our embedable iFrame video player.

1. Player iframe URL

You can either copy/paste the html iframe snippiet from within your Ignite admin interface or create the iframe URL yourself, following some simple logic. First you need to construct your base embed URL.

Your base URL:

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

Example:

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

2. Configure the player

You can configure the behavior and appearance of the player by adding query parameters to the embed URL.

All parameters are optional and have sensible defaults. You can combine multiple parameters by separating them with & in your URL:

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

Parameters are grouped by use case below, with the most common groups first. Within each group, parameters are listed alphabetically (except preset, which comes first under Appearance because it overrides other design settings).

  • Playback — autoplay, limitQuality, loop, muted
  • Player controls — airPlay, controls, fullscreen, googleCast, lang, pip, showTranscription
  • Appearance — preset, colorBackground, colorPrimary, colorSecondary, fit, uiPadding, uiRadius
  • Captions & language — captionsColorBackground, captionsColorFont, captionsOnFullscreen, captionsRadius, initCaptions

Playback

autoplay

  • Type: boolean
  • Default: false

Start the video automatically when the player loads. Note that most browsers require the video to be muted for autoplay to work.

limitQuality

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

Limits the maximum streamed quality of the video. Useful for bandwidth management or when you want to restrict quality options for certain use cases.

loop

  • Type: boolean
  • Default: false

Loop the video playback. When enabled, the video will automatically restart from the beginning after it ends.

muted

  • Type: boolean
  • Default: false

Start the video muted. This is often required in combination with autoplay due to browser autoplay policies.

Player controls

airPlay

  • Type: boolean
  • Default: false

Allow users to cast the video via AirPlay (Apple devices).

controls

  • Type: boolean
  • Default: true

Show or hide the control bar.

fullscreen

  • Type: boolean
  • Default: true

Allow the video to be played in fullscreen mode. When disabled, the fullscreen button will be hidden.

googleCast

  • Type: boolean
  • Default: false

Allow users to cast the video via Google Cast (Chromecast).

lang

  • Type: string
  • Default: Browser setting

Force the UI and default subtitle language. Use standard locale codes (e.g., en-US, de-DE, fr-FR).

pip

  • Type: boolean
  • Default: false

Allow users to use Picture-in-Picture mode. When enabled, users can pop the video out into a floating window.

showTranscription

  • Type: boolean
  • Default: false

Shows a transcript button in the control bar, allowing users to view the video transcript.

Appearance

preset

  • Type: string
  • Default: none (uses the design preset assigned to the video in the admin UI, if any)

Apply a player design preset by ID. Create presets in the Ignite admin UI, then pass the preset ID here to use that design for this embed.

This overrides any design preset already assigned to the video. Other URL parameters (for example colorPrimary or controls) still override individual values from the preset when you set them.

colorBackground

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

Background color for UI elements. Supports transparency via rgba() format (e.g., rgba(0,0,0,0.25)).

colorPrimary

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

UI element highlight color. Used for active states, progress bars, and interactive elements. Provide hex values without the # prefix, or use rgba() format.

colorSecondary

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

UI element base color. Used for icons and text in the control bar.

fit

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

Change how the video is fitted inside the player frame.

  • contain — The video is scaled to fit within the player while maintaining its aspect ratio. May result in letterboxing.
  • cover — The video is scaled to cover the entire player area while maintaining its aspect ratio. May result in cropping.

uiPadding

  • Type: number
  • Default: 12

Padding (in pixels) from the player controls to the player edges.

uiRadius

  • Type: number
  • Default: 10

Border radius (in pixels) of the player controls. Set to 0 for sharp corners.

Captions & language

captionsColorBackground

  • Type: string (hex or rgba)
  • Default: rgba(0, 0, 0, 0.7)

Background color of caption cues. Provide hex values without the # prefix, or use rgba() format. Browser user caption preferences still take precedence when set.

captionsColorFont

  • Type: string (hex or rgba)
  • Default: white

Text color of caption cues. Provide hex values without the # prefix, or use rgba() format. Browser user caption preferences still take precedence when set.

captionsOnFullscreen

  • Type: boolean
  • Default: false

When enabled, captions turn on automatically when the viewer enters fullscreen. On exit they turn off again, unless the viewer changed captions while in fullscreen. If captions are already on, this option does nothing.

On iPhone, fullscreen uses Safari’s native video presentation, so captions appear via Apple’s native caption UI rather than the player’s custom overlay.

This only responds to the player’s own fullscreen control (or native fullscreen on iPhone). If the embedding page fullscreens the <iframe> itself, captions are not auto-enabled — use the Player.js enableTextTrack method in that case.

captionsRadius

  • Type: number
  • Default: 6

Border radius (in pixels) of caption cues. Set to 0 for sharp corners.

initCaptions

  • Type: boolean
  • Default: false

When enabled, captions will be visible by default when the player loads.

Example query parameters:

&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. Creating the iframe

Create an iframe element in your HTML and set the src attribute to the URL you constructed in the previous step. It’s important to set some styling attributes to make sure the player looks and behaves to your liking.

<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>

Live Example

Here’s a live example of the player in action:

IntroductionPlayer API