Skip to main content

Embeddable Player

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

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

Simple example​

<iframe
  width="640"
  height="360"
  src="https://player.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://player.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 - Vindral's configurable latency: adjust from 100ms (ultra-low) to 5000ms+ (high stability). Default is 1500ms. We generally recommend around 1000ms to 1500ms for global playout, as going lower often yields diminishing returns. See our Latency Control guide for detailed configuration strategies.
  • 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.

embed.vindral.com​

The domain was previously known as https://embed.vindral.com but has now been renamed to https://player.vindral.com. The use of https://embed.vindral.com is deprecated.