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-moment-nav-behavior	"moment" (default) stops at the end of a clicked moment and shows the end card, like _seeen_moment; "seek" only jumps to it
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-moment-nav-behavior	"moment" (default) stops at the end of a clicked moment and shows the end card, like _seeen_moment; "seek" only jumps to it
data-share	"true" to show the social share popover (hidden by default)

Backward compatibility

seeen-single and data-seeen="single" continue to work and will not be removed.

Playlist

Displays a video player with a scrollable playlist sidebar. Supports API-driven and pre-fetched modes.

API-driven playlist

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

Pre-fetched 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	Mode	Description
data-api-key	API-driven	Required. Your SEEEN API key
data-playlist-id	API-driven	Required. The playlist ID to load
data-page-size	API-driven	Videos fetched per page, loaded incrementally (default 30)
data-max-videos	Both	Maximum number of videos to show (default: no limit)
data-videos	Pre-fetched	Required. JSON array of video objects
data-overlays	Both	JSON array of CTA overlay objects applied to all videos
data-initial-index	Both	Zero-based index of the video to play first (default 0)

Each pre-fetched 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-page-size	API-driven	Videos fetched per page, loaded incrementally as you scroll (default 30)
data-max-videos	Both	Maximum number of videos to show; scrolling stops loading at this limit (default: no limit)
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