Dynamically Embed Videos and Channels

Dynamic embedding lets an application select a DynTube video or channel from its own data and render the matching generated embed. Store a stable media type with the trusted embed identifier or URL; avoid storing complete HTML submitted by users.

Build a single-video iframe URL

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 an iframe with the returned src and matching id, a descriptive title, responsive 16:9 sizing, and permissions for autoplay, fullscreen, encrypted media, and picture in picture. Preserve a different playback host when the dashboard generated one for your account.

Use the generated channel embed

A channel has a different identifier and URL shape from a single video. Copy the channel iframe or share URL after saving the channel. When a CMS can render either media type, persist video or channel alongside its generated identifier and select the matching template at render time.

Switch the active embed

1. Authorize the signed-in viewer and selected media on your server.
2. Return the allowed generated embed data or short-lived playback URL.
3. Detach listeners from the previous player instance.
4. Render the new iframe with a unique, stable playerId.
5. Attach the v2 SDK only when events or methods are needed, then await player.ready.

Secure and efficient rendering

• Keep DynTube API and signing keys on the backend.
• Allow only the playback hosts your application expects.
• Lazy-load players below the fold while reserving their aspect ratio.
• Apply allowed origins and short link expiry to protected libraries.
• Mount only the players a page needs and avoid simultaneous autoplay.