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/?core.channelId=vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f&core.minBufferTime=1000"
  frameborder="0"
  allow="autoplay; fullscreen"
  allowfullscreen
></iframe>

Just set the core.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/?core.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.

Advanced playback parameters​

The Embed Player also accepts lower-level Web SDK options as query parameters. These are most useful when you are optimizing latency or testing browser-specific playback paths:

  • core.decoders - choose decoder priority, for example webcodecs,mse,wasm
  • core.offscreenCanvasEnabled - explicitly enable or disable worker-side OffscreenCanvas rendering when WebCodecs is active
  • core.streamToMediaElementEnabled - in the Embed Player this defaults to true, keeping media-element features such as fullscreen and Picture-in-Picture available for canvas-rendered playback
  • core.webcodecsHardwareAcceleration - choose no-preference, prefer-hardware, or prefer-software

For a deeper explanation of these options and their tradeoffs, see WebCodecs & Offscreen Renderer.

Example: prefer WebCodecs while still keeping media-element fullscreen/PiP support:

<iframe
  width="640"
  height="360"
  src="https://player.vindral.com/?core.channelId=vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f&core.decoders=webcodecs,mse,wasm&core.offscreenCanvasEnabled=true&core.streamToMediaElementEnabled=true&core.webcodecsHardwareAcceleration=prefer-software&core.minBufferTime=1000"
  frameborder="0"
  allow="autoplay; fullscreen"
  allowfullscreen
></iframe>

Read more about these parameters at Embeddable Player API reference.

The only required parameter is core.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.