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, fullscreenOnPlay, limitQuality, loop, muted
  • Player controls — airPlay, controls, fullscreen, googleCast, lang, pip, showAudioTracks, showSeekButtons, showTranscription
  • Appearance — preset, aiContentLabel, aspectRatio, 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.

fullscreenOnPlay

  • Type: boolean
  • Default: false

When enabled, the player enters fullscreen when the viewer starts playback with a click or tap. Only the start of playback enters fullscreen. Resuming after a pause or seeking does not. If the viewer replays the video after it ends, the player enters fullscreen again.

Autoplay and the Player.js play method do not enter fullscreen, because browsers only allow fullscreen after a viewer action.

This option is independent of fullscreen. Setting fullscreen=false only hides the fullscreen button.

The <iframe> element must allow fullscreen with allow="fullscreen" or the allowfullscreen attribute. The embed code from the Ignite admin interface already includes this.

On iPhone, fullscreen uses Safari’s native video presentation. Inside an iframe, the player loads the video metadata when the player becomes visible, so that fullscreen works on the first tap.

fullscreenOnPlay is only a URL parameter. It is not stored on a player preset or on the video’s player.playerDesign.

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.

showAudioTracks

  • Type: boolean
  • Default: false

Show a button that lets viewers switch between alternative audio tracks, for example different languages or audio description. The button stays hidden when the video has only one audio track. Enable this whenever a video has an audio description track, so viewers can select it.

showSeekButtons

  • Type: boolean
  • Default: false

Show buttons next to the play button that skip 10 seconds backward or forward.

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.

aiContentLabel

  • Type: string
  • Default: auto
  • Values: auto, off, topLeft, topRight, bottomLeft, bottomRight

Position of the AI content label (EU “AI” icon plus a short localized word such as “Generated” or “Modified”; the full wording “AI-generated” / “AI-modified” is the accessible name and tooltip). The label is only rendered for videos or live events that are tagged as AI content in Ignite (field “AI content” = fully AI-generated or partially AI-modified); untagged content never shows it. auto places it top right. off hides it; you remain responsible for compliance with regulations such as the EU AI Act (Art. 50). The label is a player overlay and is not burned into downloaded files.

aspectRatio

  • Type: string
  • Default: original
  • Values: original, 16/9, 9/16, responsive, 4/3, 1/1, 3/4, 4/5

This is not a URL parameter. It is stored on the player design and on a player preset. The embed code from the Ignite admin interface uses it to set the size of the iframe. original keeps the video’s own aspect ratio.

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