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 of the player by adding query parameters to the URL. Here are the available options:

Parameter	Description	Values	Default
controls	Show or hide the control bar	`true` / `false`	`true`
loop	Loop the video	`true` / `false`	`false`
muted	Start the video muted	`true` / `false`	`false`
autoplay	Start the video automatically	`true` / `false`	`false`
fullscreen	Allow the video to be played in fullscreen mode	`true` / `false`	`true`
fit	Change how the video is fitted inside the player	`contain` / `cover`	`contain`
initCaptions	Captions will be visible by default.	`true` / `false`	`false`
showTranscription	shows a transcript button in control bar	`true` / `false`	`false`
uiRadius	border radius of the player controls	number	10
uiPadding	padding from player controls to player edges	number	12
colorPrimary	UI element highlight color	hex / rgba(`00FF00`)	`D90B5A`
colorSecondary	UI element base color	hex / rgba(`FF0000`)	`FFFFFF`
colorBackground	UI element base color	hex / rgba(`rgba(0,0,0,0.25)`)	`000000`

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:

Introduction Player API