Skip to content

Embed the player

Every video comes with a hosted player page you embed with an iframe — no JavaScript SDK to install. The player handles adaptive quality, captions, chapters, scrub previews, and analytics out of the box.

Embedding a video

The video's link field in the API ⧉ holds the embed URL. For a public video it is a permanent URL of the form /e/<project_id>/<video_id>/:

<iframe src="https://staging.heapstream.com/e/<project_id>/<video_id>/"
        width="640" height="360"
        allowFullScreen
        style="border: none;"
        allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>

The dashboard's Embed dialog on each video generates this snippet for you.

Private videos need a signed token: generate a JWT and use the /et/<project_id>/?token=<jwt> URL instead — see Secure video playback. Extra parameters like autoplay and player_id carry through.

Password-protected videos (a private video with a password set) are embedded by appending ?password=<password> to the URL — the dashboard's embed dialog injects it automatically. A video's password field can hold several comma-separated passwords, all of which work; a wrong password renders a blocked page instead of the player.

URL parameters

Parameter Values Effect
autoplay any non-empty value Start playback as soon as the player loads. The player mutes itself to satisfy browser autoplay policies.
t seconds (integer) Start playback at this time offset.
volume 01 Initial volume.
player_id a player id Render with a specific one of the project's players instead of the default. An unknown id falls back to the default player.
password string Unlocks a password-protected video (see above).
token JWT Access token for private videos (only on /et/… and the signed asset URLs).
uid string Sets the viewer id used by analytics to count unique viewers — pass your own user id to track logged-in viewers across devices.

There are no muted or loop parameters; muting happens automatically with autoplay.

Responsive sizing

The iframe itself is fixed-size (the player fills whatever box it's given). For a fluid 16:9 embed, size the iframe with CSS instead of the width/height attributes:

<iframe src="…" allowFullScreen
        style="border: none; width: 100%; aspect-ratio: 16 / 9;"
        allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>

Customizing the player

Players are per-project profiles: each project has a default player, and you can create more and select one per embed with ?player_id=. Configure them on the dashboard's Player Edit page or through the player API ⧉:

  • Controls — toggle the quality, speed, zoom, and share menus, the ±10 s rewind buttons, the title overlay, and the scrub-bar storyboard previews.
  • Logos — three independent PNG uploads: an in-player corner logo (with a corner picker: top_left, top_right, bottom_left, bottom_right), a control-bar logo, and a title logo. Images are resized to fit automatically.
  • Behavior — resume-from-last-position and pause-when-tab-hidden are configured per player on the Player Edit page.

Keyboard shortcuts

Key Action
Space or K Play / pause
M Mute / unmute
F Fullscreen
C Captions on / off
I Picture-in-picture
Left / Right Seek −5 s / +5 s
J / L Seek −10 s / +10 s
Up / Down Volume up / down
> / < Playback speed up / down
09 Jump to 0–90% of the video
Home / End Jump to start / end

Resume from last position

With the player's resume setting enabled, the player remembers each viewer's position (in the browser's local storage) and picks up where they left off. Positions in the first two seconds count as "not started", finishing a video clears the stored position, and a viewer who stopped within the last second starts from the beginning instead of resuming into the credits.

Restricting where the player embeds

By default the embed page can be framed by any site. To restrict it, set the project's allowed domains: embeds on other sites are then blocked (the blocked page offers a "Watch the video" link to the video's permalink, when one is set).

While a video is processing

Embedding a video that is still encoding shows a "Video is being encoded" placeholder; the player appears automatically once the essential renditions are ready.