HTML

Try out Source Embedder in your HTML project.

CodePen Example

<!-- Target video element -->
<video id="videoElement" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" style="width: 100%;" controls></video>

<br />

<div>
  <button id="show">show</button>
  <button id="hide">hide</button>
</div>

<!-- Load script -->
<script src="https://embed.sourcesync.io"></script>
<script>
  let embedderInstance
  // Wait for the library to be loaded
  const onLoaderReady = async () => {
    const SourceEmbeds = await window.SourceEmbedsLoader.load()
    const embedder = SourceEmbeds.register({
      // base settings for embedder
    })
    const el = document.getElementById('videoElement')
    await embedder.embed({
      // target element
      el,
      // recommended strategy for embedding
      strategy: "direct-iframeless",
      // ID of the distribution to embed
      distributionId: 'getting-started'
    })
    
    // get handler
    embedderInstance = embedder.getInstance(el)
    
    // example methods
    document.getElementById('show')
      .addEventListener('click', () => embedderInstance.show())
    document.getElementById('hide')
      .addEventListener('click', () => embedderInstance.hide())
    
  }
  onLoaderReady()
</script>