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

The available options are organized into the following categories:

  • Playback — Control how the video plays (autoplay, loop, muted, limitQuality)
  • Controls — Configure the player UI (controls, fullscreen, pip, airPlay, googleCast)
  • Captions & Language — Subtitle and localization settings (initCaptions, showTranscription, lang)
  • Appearance — Customize the look and feel (fit, uiRadius, uiPadding, colorPrimary, colorSecondary, colorBackground)

controls

  • Type: boolean
  • Default: true

Show or hide the control bar.

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.

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.

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.

initCaptions

  • Type: boolean
  • Default: false

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

showTranscription

  • Type: boolean
  • Default: false

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

uiRadius

  • Type: number
  • Default: 10

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

uiPadding

  • Type: number
  • Default: 12

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

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.

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

fullscreen

  • Type: boolean
  • Default: true

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

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.

airPlay

  • Type: boolean
  • Default: false

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

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

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.

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