Videos
How to Embed Videos in WordPress
WordPress needs one thing from DynTube: the embed code the dashboard generates for that video. Paste it into a Custom HTML block and you are done — there is nothing to install.
Before you start
- The video must have finished processing. A video that is still processing can be embedded, but it will not play until it is ready.
- You need edit access to the WordPress page or post, and your role must be allowed to use the Custom HTML block. Some managed hosts and multisite installs restrict raw HTML.
- If the video's allowed-domain list is not empty, add the WordPress site's domain — including any staging or preview host — to it. An empty list means no domain restriction; a non-empty list that does not match the embedding host makes playback authorization answer 403 and refuse to start.
Step 1 — copy the embed code from DynTube
- In the dashboard sidebar, open Video Library (/projects) and open the project holding the video.
- Open the video, then select the Embed tab. (From a video card you can also choose Embed to open the same snippets in a dialog.)
- Copy the snippet marked Recommended — the responsive iframe. It already contains this video's embed key.
The dashboard fills the key in for you. The examples in this article show the same shape with the key written as YOUR_EMBED_KEY so you can see which parts do what before you paste your own.
If the dashboard will not give you a snippet
| What you see | What it means | What to do |
|---|---|---|
| "This video is missing its embed key. Please run the EmbedKey backfill or contact support before sharing it." | The video has no EmbedKey, and the dashboard deliberately shows this notice rather than falling back to an older identifier. Without the key there is no embed URL to generate. | Contact support — do not hand-build a URL from another identifier. The embed key is the only identifier the snippet carries. |
| A restricted notice on the Embed tab instead of the code | External embedding is not available on this account's plan, so embed codes are withheld at source. | Upgrade the plan, or share the video with a private link instead of embedding it. |
Step 2 — paste it into a Custom HTML block
In the block editor (Gutenberg), the Custom HTML block is the one to use. It passes your markup through unchanged, which a paragraph block will not.
- Edit the page or post, and place the cursor where the video should appear.
- Add a block, search for "Custom HTML" and insert it.
- Paste the whole snippet — wrapper div included — into the block.
- Use the block's Preview tab to confirm the player appears, then update the page.
<div style="position:relative;width:100%;overflow:hidden;padding-top:56.25%">
<iframe
style="position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;border:none"
allow="autoplay; fullscreen"
allowfullscreen
src="https://dyn.tube/embed/video/YOUR_EMBED_KEY?playerId=dyntube-YOUR_EMBED_KEY"
title="Your video title"></iframe>
</div>The outer div is what makes this responsive inside a WordPress theme: it fills the column it sits in, and its 56.25% top padding reserves a 16:9 box that the iframe is pinned to on all four sides. Nothing else is required — no script, no plugin, and no theme change. Each video is its own self-contained snippet.
Change the title attribute to something that describes the video. Screen readers announce it, and "Video" tells a listener nothing.
The classic editor and page builders
- Classic editor: switch from Visual to Text before pasting, then avoid switching back — the Visual tab can rewrite or strip the markup.
- Elementor, Beaver Builder, Divi and similar: use the builder's HTML or Code widget, not its own Video widget.
- Any rich-text field that sanitises input: expect the style attribute or the whole iframe to be dropped. Move the snippet to a Custom HTML or code block instead.
Optional — the JavaScript embed
The dashboard also offers a JavaScript version. It is the same iframe plus a module script that attaches the DyntubePlayer SDK to it, so your own code can hold a reference to the player. Use it only when you need that reference; otherwise the iframe above is the better choice in WordPress, because it needs no module script to survive the editor.
<iframe id="dyntube-YOUR_EMBED_KEY"
src="https://dyn.tube/embed/video/YOUR_EMBED_KEY?playerId=dyntube-YOUR_EMBED_KEY"
allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
allowfullscreen
style="width:100%;aspect-ratio:16/9;border:0"></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>Three things have to agree: the iframe id, the CSS selector passed to DyntubePlayer, and the playerId option. The generated snippet sets all three to dyntube- followed by the embed key. Awaiting player.ready tells you the player has finished initialising.
What goes in the snippet
| Part | Value | Notes |
|---|---|---|
| Embed key | The video's EmbedKey | Required, and the only identifier in the snippet. The dashboard fills it in; a video without one gets the missing-key notice instead of code. |
| Embed URL | https://dyn.tube/embed/video/YOUR_EMBED_KEY | The canonical player URL for a single video. Your account may be served from a different player host, so copy the URL the dashboard gives you rather than typing this one. |
| playerId | dyntube-YOUR_EMBED_KEY | Appended to both snippets, and reused as the iframe id and the SDK's playerId in the JavaScript version. |
| allow | autoplay; fullscreen (plus encrypted-media and picture-in-picture on the SDK snippet) | Browser permissions granted to the iframe. Removing fullscreen or allowfullscreen disables the fullscreen button. |
| title | Your own text | The accessible name of the iframe. The generator seeds it with the video's title. |
If it does not work in WordPress
| What you see | Likely cause | What to do |
|---|---|---|
| The code appears as visible text on the page | It was pasted into a paragraph block, or into the classic editor's Visual tab. | Move it to a Custom HTML block, or switch to the Text tab first. |
| Nothing renders at all | A security plugin, the theme, or the host stripped the iframe, or a content-security policy blocks frames from the player host. | Compare the published page's source against what you pasted, and allow the player host in your frame-src policy. |
| The box collapses to no height | The wrapper div — or its padding-top — was removed by the editor, so nothing reserves the 16:9 area. | Re-paste the whole snippet. The iframe is absolutely positioned and has no size of its own without the wrapper. |
| Playback is refused with "Sorry, video playback isn't available on this host!" | The embedding host does not match the effective allowed-domain list, so playback authorization answers 403 (domain_denied). | Add the domain, including any staging or preview host, to the allowed domains that apply to this video. |
| It plays on the live site but not in the editor preview | The preview runs on a different host than the published page, and that host is not on the allowed-domain list. | Add the preview host to the allowed domains too, or test on the published URL. |
| The SDK never initialises | The module script was stripped, or the iframe id, the DyntubePlayer selector and the playerId no longer match. | Re-copy the JavaScript snippet so all three carry the same dyntube- prefixed embed key, and confirm the script survived in the page source. |
Limitations to be aware of
- There is no DynTube WordPress plugin, so there is no shortcode, no settings screen and no bulk insertion. Every embed is a snippet you paste.
- Embedding a channel is a separate workflow with its own embed code from the channel's Embed dialog — a video embed key cannot be used for it.
- Domain restrictions protect the embed, not the viewer. Someone already authorised can still record their own screen.
- Moving a video to another project changes which project's access and restriction settings apply to it at playback, from the moment it is moved. The destination project's allowed domains and country rules take effect wherever that project overrides the account defaults, so a WordPress embed that worked can stop playing or behave differently. Re-test the embedded page after any move.
Related Articles
- How to Upload & Embed Videos
- How to Embed DynTube Video Channel in WordPress/LearnDash
- How to Secure Your Videos on DynTube
Something missing or wrong here? Tell us and we will correct it. New to DynTube? Start with uploading and embedding.