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: