Dynamically Embed Videos and Channels

Dynamic embedding means your application selects a video or channel from data and renders the corresponding DynTube embed. Store stable embed identifiers or generated URLs, not complete HTML snippets from untrusted users, and keep authorization on the server for protected content.

Single-video iframe

function videoEmbedUrl(embedKey) {
  const playerId = `dyntube-${embedKey}`;
  const url = new URL(`https://dyn.tube/embed/video/${encodeURIComponent(embedKey)}`);
  url.searchParams.set('playerId', playerId);
  return { playerId, src: url.toString() };
}

Create the iframe with this src, a matching id, a descriptive title, responsive sizing, and the required allow attributes. When your account uses another generated playback host, store and use that host rather than hard-coding the example.

Channels use their generated channel embed

A channel and a single video have different identifiers and route shapes. Copy the channel iframe or share URL after the channel is saved. Do not insert a channel key into the single-video route. If a CMS chooses between both, store the media type with the identifier and select the corresponding generated template.

Switch embeds safely

1. Authorize the viewer and requested media on your server.
2. Return the allowed embed key or a short-lived signed playback URL.
3. Remove the previous iframe and SDK listeners.
4. Render the new iframe with a unique stable playerId.
5. Attach the v2 SDK only after the iframe exists and await player.ready.

Security and performance

• Never send DynTube API or signing keys to browser JavaScript.
• Restrict accepted playback hosts rather than rendering arbitrary URLs.
• Lazy-load players below the fold, but reserve their aspect ratio to avoid layout shift.
• Use allowed origins and short link expiry for protected libraries.
• Avoid mounting several autoplaying players on the same page.