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

ParameterDescriptionValuesDefault
controlsShow or hide the control bartrue / falsetrue
loopLoop the videotrue / falsefalse
mutedStart the video mutedtrue / falsefalse
autoplayStart the video automaticallytrue / falsefalse
fullscreenAllow the video to be played in fullscreen modetrue / falsetrue
fitChange how the video is fitted inside the playercontain / covercontain
initCaptionsCaptions will be visible by default.true / falsefalse
showTranscriptionshows a transcript button in control bartrue / falsefalse
uiRadiusborder radius of the player controlsnumber10
uiPaddingpadding from player controls to player edgesnumber12
colorPrimaryUI element highlight colorhex / rgba(00FF00)D90B5A
colorSecondaryUI element base colorhex / rgba(FF0000)FFFFFF
colorBackgroundUI element base colorhex / 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: