Embed the DynTube Player in React

Use a normal React iframe component for playback. It is declarative, works without injecting scripts into the document head, and remains the preferred option when your application does not need programmatic player control.

Responsive React component

export function VideoEmbed({ embedKey, title }) {
  const playerId = `dyntube-${embedKey}`;
  const src = new URL(`https://dyn.tube/embed/video/${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 }}
    />
  );
}

Validate that embedKey comes from your trusted DynTube data and encode it when building paths in production code. The title should describe the actual video. Security-sensitive playback still requires your normal authorization, signed-link, and allowed-origin workflow.

Attach the v2 SDK for player control

When a component needs events or methods, import DyntubePlayer from https://embed.dyntube.com/v2/embed-sdk.js in a browser-only effect. Construct it with the iframe selector and the same playerId used in the URL, await player.ready, then register listeners. Remove listeners or destroy the integration during cleanup according to the current SDK API.

React integration checklist

• Keep one stable playerId for each mounted player.
• Avoid re-creating the SDK instance on unrelated renders.
• Do not place API keys or signing secrets in the React bundle.
• Generate signed playback on your server after viewer authorization.
• Test conditional rendering, route changes, multiple players, and unmount cleanup.

Common failures

A blank frame can come from an incorrect embed key, unpublished video, Content Security Policy, or origin restriction. Duplicate SDK instances usually come from an effect without stable dependencies or cleanup. Begin with the standalone generated iframe, then attach the SDK after basic playback succeeds.