How to Embed the DynTube Player in React

Render the DynTube player as a normal React iframe component. This keeps playback declarative and avoids injecting a global script. Add the v2 module SDK only to components that need programmatic control or playback events.

Responsive React component

export function VideoEmbed({ embedKey, title }) {
  const playerId = `dyntube-${embedKey}`;
  const src = new URL(`https://dyn.tube/embed/video/${encodeURIComponent(embedKey)}`);
  src.searchParams.set("playerId", playerId);

  return (
    <iframe
      id={playerId}
      src={src.toString()}
      title={title}
      allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
      allowFullScreen
      style={{ width: "100%", aspectRatio: "16 / 9", border: 0 }}
    />
  );
}

Use an embed key returned by trusted DynTube data or copied from the dashboard. Keep API and signing keys in server code. For protected content, authorize the viewer and create any required short-lived playback access before the React page receives the embed data.

Attach player events or methods

Import DyntubePlayer from https://embed.dyntube.com/v2/embed-sdk.js in a browser-only effect. Construct one SDK instance for the iframe selector, pass the same playerId used in its URL, await player.ready, then register the listeners your component needs. Remove those listeners during effect cleanup.

React integration checklist

• Keep one stable playerId for each mounted player.
• Avoid recreating the SDK instance on unrelated renders.
• Copy the dashboard's generated playback host when it differs from the example.
• Configure Content Security Policy and allowed origins for the production hostname.
• Test conditional rendering, multiple players, route changes, fullscreen, captions, and cleanup.

If a frame does not load, test the generated iframe on its own and verify the embed key, publication state, Content Security Policy, and allowed-origin settings. Attach the SDK only after ordinary iframe playback succeeds.