Skip to main content

Embeddable Player

The easiest way to integrate Vindral on a website/app is to embed it using our CDN-hosted player.

embed.vindral.com hosts the latest version of the embedded client.

Simple example

<iframe
width="640"
height="360"
src="https://embed.vindral.com/?channelId=vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f"
frameborder="0"
allowfullscreen
></iframe>

Just set the channelId parameter to match your channel id.

Responsive

Responsive width/height is often desirable instead of a specific width/height. We need to set some CSS style to make that happen.

Example of a 16:9 ratio responsive video embed:

<style>
.vindral-container {
position: relative;
height: 0;
overflow: hidden;
max-width: 100%;
}
.vindral-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="vindral-container" style="padding-bottom: 56.25%">
<iframe
src="https://embed.vindral.com/?channelId=vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f"
frameborder="0"
allowfullscreen
></iframe>
</div>

Common ratios

Horizontal:

  • 16:9 - padding-bottom: 56.25%
  • 4:3 - padding-bottom: 75%
  • 3:2 - padding-bottom: 66.66%

Vertical:

  • 9:16 - padding-bottom: 177.78%
  • 3:4 - padding-bottom: 133.33%
  • 2:3 - padding-bottom: 150%

Square:

  • 1:1 - padding-bottom: 100%

Common parameters

Some common core option parameters are:

  • core.channelId - (required) which channel to connect to.
  • core.channelGroupId - when connecting to a channel group.
  • core.muted - start muted.
  • core.authenticationToken - used when connecting to authed channels.
  • core.meta.language - starting language.
  • core.minBufferTime - target buffer time / latency in milliseconds (default is 1500 ms).
  • core.maxVideoBitRate - constrain video bitrate.
  • core.maxSize.width - constrain video width.
  • core.maxSize.height - constrain video height.

Some common player option parameters are (all defaults to true):

  • player.controlsEnabled - set to false to disable controls entirely.
  • player.channelSelectionEnabled - channel selector.
  • player.renditionLevelsEnabled - quality/rendition selector button.

Read more about these parameters at Web SDK API reference.

The only required parameter is channelId.

Other use cases

The Embed Player can also be useful for fullscreen viewing on monitor screens, embedded devices, and as an entry point for TV Apps.

Self-hosting Embed Player

The Embed Player is available for self-hosted solutions.

Contact us for more information.