Embed Videos with the Current DynTube Player

Copy the embed generated for the published video from the Dashboard. It contains the correct embed key and playback host for your account. Use the iframe by itself for ordinary playback; add the v2 SDK only when your code needs to interact with the player.

Recommended responsive iframe

<iframe
  src="https://dyn.tube/embed/video/YOUR_EMBED_KEY?playerId=dyntube-YOUR_EMBED_KEY"
  title="Describe this video"
  allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
  allowfullscreen
  style="width:100%;aspect-ratio:16/9;border:0"></iframe>

Replace the placeholder with the generated embed key, preserve the host supplied by DynTube, and use a descriptive iframe title for accessibility. The aspect-ratio rule makes the player follow its container width while reserving a 16:9 box.

Optional v2 SDK

<iframe id="dyntube-YOUR_EMBED_KEY"
  src="https://dyn.tube/embed/video/YOUR_EMBED_KEY?playerId=dyntube-YOUR_EMBED_KEY"
  title="Describe this video"
  allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
  allowfullscreen></iframe>
<script type="module">
  import { DyntubePlayer } from "https://embed.dyntube.com/v2/embed-sdk.js";
  const player = new DyntubePlayer("#dyntube-YOUR_EMBED_KEY", { playerId: "dyntube-YOUR_EMBED_KEY" });
  await player.ready;
</script>

The iframe id, selector, and playerId must agree. Await player.ready before calling SDK methods. If a CMS strips module scripts, the standalone iframe remains the appropriate integration rather than restoring the retired v1 bootstrap.

Publish and verify

1. Confirm the video is processed and published.
2. Copy the generated embed rather than hand-building its identifier.
3. Add the production hostname to allowed origins when required.
4. Test playback, fullscreen, captions, and responsive sizing.
5. For protected video, test an allowed viewer and a denied viewer or origin.