Embedded Clips Player

Use StorytellerEmbeddedClipsPlayerView when you need a first-class iframe-free Clips player inside a host layout, such as a live blog or match centre. The player mounts into a normal DOM element and fills that element.

Initialization

StorytellerEmbeddedClipsPlayerView supports the same source contract as StorytellerClipsPlayerView.

const embeddedCollectionPlayer =
  new Storyteller.StorytellerEmbeddedClipsPlayerView(
    'embedded-clips-player-id',
    'clip-collection-id'
  );

const embeddedSingleClipPlayer =
  new Storyteller.StorytellerEmbeddedClipsPlayerView(
    'embedded-clips-player-id',
    { clipId: 'clip-id' }
  );

const embeddedSingleClipPlayerByExternalId =
  new Storyteller.StorytellerEmbeddedClipsPlayerView(
    'embedded-clips-player-id',
    { externalId: 'clip-external-id' }
  );

Provide exactly one source. Collection sources keep collection-player behavior, including collection-style navigation and swiping when the collection supports it. Use { clipId } or { externalId } when you need a true single embedded clip.

Sizing

The SDK does not accept width or height as constructor parameters. Control inline sizing with host-page CSS on the mount element.

For portrait Clips, set the container width and use a 9 / 16 aspect ratio so the browser derives the height automatically:

<div
  id="embedded-clips-player-id"
  style="width: 430px; max-width: 100%; aspect-ratio: 9 / 16;"
></div>

const embeddedSingleClipPlayer =
  new Storyteller.StorytellerEmbeddedClipsPlayerView(
    'embedded-clips-player-id',
    { externalId: 'clip-external-id' }
  );

Configuration

The embedded Clips player uses the same configuration shape as StorytellerClipsPlayerView.

const embeddedClipPlayerConfiguration: IListConfiguration<'StorytellerEmbeddedClipsPlayerView'> =
  {
    theme: customTheme,
    uiStyle: 'dark',
  };

embeddedClipPlayer.configuration = embeddedClipPlayerConfiguration;

You can also update the active source through configuration. Continue to provide exactly one of collection, clipId, or externalId when changing the source.

embeddedClipPlayer.configuration = {
  externalId: 'new-clip-external-id',
};

Back Button Delegate

StorytellerEmbeddedClipsPlayerView uses StorytellerClipsPlayerDelegate through the same delegate property as StorytellerClipsPlayerView.

const embeddedClipPlayer = new Storyteller.StorytellerEmbeddedClipsPlayerView(
  'embedded-clips-player-id',
  { externalId: 'clip-external-id' }
);

embeddedClipPlayer.topLevelBackButtonEnabled = true;
embeddedClipPlayer.delegate = {
  onTopLevelBackTapped: () => {
    window.history.back();
  },
};

onPlayerDismissed still means the player was actually dismissed. A top-level back tap uses onTopLevelBackTapped instead, and only falls back to window.history.back() when no callback is provided.

When topLevelBackButtonEnabled is false or omitted, the embedded top-level back button is not shown and onTopLevelBackTapped is not called from that button.