Skip to main content

Simple Integration

This is a simple example of how to integrate the Embedder into your project. If you have an HTML 5 video element, it's pretty easy to add the Embedder to it.

HTML 5​

Basic Video Element​

Here is a basic example of an HTML 5 video element.

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

Add the Embedder​

Let's change the basic example above to something like this:

<html>
<head>
    <script src="https://embed.sourcesync.io/c/F15KoervY-cLTaoaGzLi7" defer></script>
</head>
<body>
    <div>
        <video
            data-sd-video
            src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
            autoplay 
            muted
            controls
        ></video>
    </div>
</body>
</html>

Review Changes​

  1. We added the Embedder script to the page.
<script defer src="https://embed.sourcesync.io/c/F15KoervY-cLTaoaGzLi7"></script>
  1. We added the data-sd-video attribute to the video element
<video
    data-sd-video
    ...
></video>
  • data-sd-video - By adding this to the video element, the Embedder will know how to find the video element you want to target.
info

The unique identifier F15KoervY-cLTaoaGzLi7 is an example configuration. You will need to replace it with the unique identifier for your configuration.