Skip to main content

Embedding content

This guide will present the basic steps of generating embeddings with the Streamdiver API.

Player widget embedding​

Media asset can be embedded on any website using our player widget. It requires adding a link in the head and script tag in body as follows:

<html>
<head>
    <link rel="stylesheet" href="https://assets.streamdiver.com/playerwidget/sdplayerwidget.css">
</head>
<body>
    <sd-player-widget tenant-name="{tenant-shortcode}" asset-id="{media-asset-id}" channel-id="{optional-channel-id}"></sd-player-widget>
    <script type="module" crossorigin src="https://assets.streamdiver.com/playerwidget/sdplayerwidget.min.js"></script>
</body>
</html>
info

Media asset must be in at least public channel in order to be used with the widget!

A channel's visibility can be updated to public using the publish endpoint:

curl --request PUT '{{baseUrl}}/channels/5502f2be-0553-40d5-b70c-9cd2abbac601/visibility' \
--header 'Content-Type: application/json' \
--header 'Accept: application/json' \
--header 'Authorization: Bearer eyJh...20yA' \
--data '{
    "visibility": "public"
}'

To obtain the player widget code snippet, retrieve the media asset

curl '{{baseUrl}}/media/5502f2be-0553-40d5-b70c-9cd2abbac601' \
--header 'Accept: application/json' \
--header 'Authorization: Bearer eyJ...20yA'

and access the player property of the media asset:

{
    "data": {
        "renditions": [],
        "subtitles": [],
        "permissions": [],
        "player": "<sd-player-widget tenant-name=\"dev-internal\" asset-id=\"1d0255cc-08af-4301-b16c-23c6c2655f77\"></sd-player-widget><script type=\"module\" crossorigin src=\"https://dev-static.streamdiver.com/playerwidget/sdplayerwidget.min.js\"></script><link rel=\"stylesheet\" href=\"https://dev-static.streamdiver.com/playerwidget/sdplayerwidget.css\">",
        "id": "1d0255cc-08af-4301-b16c-23c6c2655f77",
        "audit": {},
        "name": "sampleVideo",
        "type": "video",
        ...
    },
    "status": "success"
}

iframe embedding​

info

Media assets and channels can be embedded with iframes when upgrading the API subscription with the Public Portal.

Channels and the contained media assets will automatically be published to the Public Portal, if it has been enabled.

  1. Again, to publish content with iframes first adapt the channel's visibility
curl --request PUT '{{baseUrl}}/channels/f619ed72-4eb8-419f-acd8-6fb8ecdb7450/visibility'

  1. Now the asset will be visible in: Tenant's Public Portal

  2. An iframe snippet can then be created as follows:

<iframe
  style="border: none; aspect-ratio: 16/9"
  src="https://try.streamdiver.com/public/media/77f60824-a9e9-4691-aa56-0d092960aa4f?start=0&end=33&autoplay=true"
  width="100%"
  height="100%"
  allowfullscreen="true"
></iframe>

Embedding a channel​

To embed the channel simply adapt the source URL to reference the channel:

<iframe
  style="border: none; aspect-ratio: 16/9"
  src="https://try.streamdiver.com/public/channels/87ff63b5-44b6-47c6-bb5a-cb85d3bc1ffb/media/4c61f2f4-1cf5-4db1-a3cf-e96540162d9e?start=0&end=28&autoplay=true"
  width="100%"
  height="100%"
  allowfullscreen="true"
></iframe>

Configuration parameters​

  • start Start time in seconds
  • end End time in seconds
  • autoplay Enabling automatic playback (boolean)
  • standAlone For embedding the player only (boolean)
  • loop Enable for playback in a loop (boolean)
  • mediaCover Adapt media width to embed (boolean)
  • hideControls Disable the player controls (boolean)

Example with enabled stand-alone mode and without player controls:

<iframe
  style="border: none; aspect-ratio: 16/9"
  src="https://try.streamdiver.com/public/channels/87ff63b5-44b6-47c6-bb5a-cb85d3bc1ffb/media/4c61f2f4-1cf5-4db1-a3cf-e96540162d9e?start=0&end=28&autoplay=true&standAlone=true&hideControls=true"
  width="100%"
  height="100%"
  allowfullscreen="true"
></iframe>