Skip to main content

Minimal Configuration

At a minimum, when configuring the Embedder, you should specify el, distributionId, and strategy.

const config = {
    el: document.getElementById('my-video'),
    distributionId: 'getting-started',
    strategy: 'direct-iframeless'
}
  • el is the element that you want to embed to, typically an HTML Video element.
  • distributionId is the ID of the distribution to embed.
  • strategy is the recommended strategy for embedding.

Understanding the options​

el​

This is the element that you want to embed to, typically an HTML Video element. You may specify the element by passing the element itself, or by passing a selector string that can be used to find the element.

Example​

<div>
    <video id="my-video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" autoplay muted controls></video>
</div>

In the above example, the value for el could be be document.getElementById('my-video') or '#my-video'.

distributionId​

This is the ID of the distribution to embed. It is the numeric ID or slug from the SourceSync platform.

tip

It is possible to get the distributionId dynamically, or use a different identifier. See the Dynamic Configuration section for more information.

strategy​

This is the recommended strategy for embedding. The default strategy is direct-iframeless, which is the most performant and flexible strategy.

Other options are:

  • parent - Embeds the distribution in the parent element, using an iframe
  • float-absolute - Embeds the distribution in a floating iframe, positioned absolutely
  • float-fixed - Embeds the distribution in a floating iframe, positioned fixed
  • direct - Embeds the distribution directly in the parent element
  • direct-iframeless - Embeds the distribution directly in the parent element, without an iframe
  • direct-with-iframe - Embeds the distribution directly in the parent element, with an iframe