CDN & web components

seeen-embed.js is a self-contained bundle that registers custom elements and exposes a global Seeen object. No npm, no bundler, no build step required.

Add the script

Paste this once in your <head> (or before </body>):

<script src="https://code.seeen.com/embed/latest/seeen-embed.js" async></script>

Embed options

Once the script is loaded you have three ways to embed a player. Pick one.

Web component

<seeen-video data-api-key="YOUR_KEY" data-video-id="1234"></seeen-video>

Auto-discovery (`data-seeen`)

Any element with data-seeen is automatically mounted when the script loads, and again whenever new matching elements are added to the DOM.

<div data-seeen="video" data-api-key="YOUR_KEY" data-video-id="1234"></div>

Imperative mount

<div id="my-player"></div>
<script>
  Seeen.mount("video", "#my-player", {
    apiKey: "YOUR_KEY",
    videoId: "1234",
  });
</script>

Single embed attributes

The single embed supports two modes depending on whether you want SEEEN to fetch the video for you or supply the data yourself.

API-driven mode

SEEEN fetches all video metadata. Requires data-api-key and data-video-id.

| Attribute | Description | | ---------------------- | -------------------------------------------------------- | | data-api-key | Required. Your SEEEN API key | | data-video-id | Required. The video ID to load | | data-autoplay | "true" to autoplay (most browsers also require data-muted) | | data-muted | "true" to mute on load | | data-start-time | Start playback at this position in seconds | | data-overlays | JSON array of CTA overlay objects | | data-ga-measurement-id | Google Analytics 4 measurement ID (e.g. "G-XXXXXXXX") | | data-moments-nav-position | "above" (default), "below", or "none" to hide | | data-share | "true" to show the social share popover (hidden by default) |

Pre-fetched mode

You supply the video data directly. Requires data-src.

| Attribute | Description | | ------------------------------ | -------------------------------------------------------- | | data-src | Required. HLS .m3u8 or MP4 URL | | data-id | Unique identifier for this video | | data-title | Video title | | data-description | Video description | | data-poster | Poster image URL shown before playback | | data-thumbnail-storyboard-url | WebVTT storyboard URL for scrubber previews | | data-duration | Video duration in seconds | | data-sponsor | JSON sponsor object shown on the end card | | data-autoplay | "true" to autoplay (most browsers also require data-muted) | | data-muted | "true" to mute on load | | data-start-time | Start playback at this position in seconds | | data-overlays | JSON array of CTA overlay objects | | data-ga-measurement-id | Google Analytics 4 measurement ID (e.g. "G-XXXXXXXX") | | data-moments-nav-position | "above" (default), "below", or "none" to hide | | data-share | "true" to show the social share popover (hidden by default) |

Playlist

Supply a JSON array of video objects via data-videos.

<seeen-playlist
  data-videos='[
    {"id":"1","title":"Ep 1","src":"https://example.com/ep1.m3u8","poster":"https://example.com/ep1-thumb.jpg"},
    {"id":"2","title":"Ep 2","src":"https://example.com/ep2.m3u8","poster":"https://example.com/ep2-thumb.jpg"}
  ]'
></seeen-playlist>

| Attribute | Description | | -------------------- | --------------------------------------------------------- | | data-videos | Required. JSON array of video objects | | data-overlays | JSON array of CTA overlay objects applied to all videos | | data-initial-index | Zero-based index of the video to play first (default 0) |

Each video object accepts: id, title, src, poster, description, thumbnailStoryboardUrl, duration, sponsor.

Reels

Renders a scrollable thumbnail grid. Clicking a thumbnail opens a full-screen vertical snap player. Supports API-driven and pre-fetched modes.

API-driven reels

<seeen-reels
  data-api-key="YOUR_API_KEY"
  data-playlist-id="284"
></seeen-reels>

Pre-fetched reels

<seeen-reels
  data-videos='[
    {"id":"1","title":"Clip 1","src":"https://example.com/clip1.m3u8","poster":"https://example.com/clip1-thumb.jpg","aspectRatio":"9:16"},
    {"id":"2","title":"Clip 2","src":"https://example.com/clip2.m3u8","poster":"https://example.com/clip2-thumb.jpg","aspectRatio":"9:16"}
  ]'
></seeen-reels>

| Attribute | Mode | Description | | ------------------- | ------------ | ------------------------------------------------------- | | data-api-key | API-driven | Required. Your SEEEN API key | | data-playlist-id | API-driven | Required. The playlist ID to load | | data-videos | Pre-fetched | Required. JSON array of video objects | | data-overlays | Both | JSON array of CTA overlay objects applied to all videos |

Each pre-fetched video object accepts: id, title, src, poster, description, thumbnailStoryboardUrl, duration, aspectRatio, sponsor.

Global API

window.Seeen is available after the script executes:

Seeen.mount(mode, selector, props); // mount a player into a CSS selector
Seeen.version; // bundle version string