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"
  allow="autoplay; fullscreen"
  allowfullscreen
></iframe>

Just set the channelId parameter to match your channel id.

The allow="autoplay; fullscreen" part is needed to let the iframe autoplay and use fullscreen, if possible.

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"
    allow="autoplay; fullscreen"
    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.