How to Add an Interactive Demo to WordPress
August 18, 2026
WordPress can embed a demo without any plugin, and the reason people think otherwise is that pasting an iframe into the wrong place makes it disappear with no error at all.
Here is the mechanism, the permissions gotcha, and responsive sizing without installing anything.
Use the Custom HTML block
- Add a block → Custom HTML. Not a Paragraph block, which strips iframes silently.
- Paste the iframe from your demo tool.
- Use the Preview tab inside the block; the editor does not render it inline.
- Update, then check the live page. Some caching plugins serve a stale version for a few minutes.
Why your iframe vanished
WordPress strips iframes from content saved by users without the `unfiltered_html` capability. On single-site installs that is Administrators and Editors; on multisite it is normally only Super Admins, which is why this bites hardest on managed multisite hosting.
If your iframe disappears on save and you are not an admin, that is the cause -- not the block, and not the demo tool. Ask for the capability or have an admin place the block.
Responsive without a plugin
Wrap the iframe in a div with `position: relative; padding-top: 62.5%; height: 0`, and give the iframe `position: absolute; top: 0; left: 0; width: 100%; height: 100%`. That is the entire technique, and it works in the Custom HTML block with inline styles.
Plenty of "responsive iframe" plugins exist to do exactly this. They are not worth the update surface for six lines of CSS.
Theme and caching interference
- Aggressive caching plugins can serve a stale page after you update -- purge before debugging anything else.
- Some optimisation plugins lazy-load iframes by default, which can delay the demo more than you want above the fold.
- Content-Security-Policy from a security plugin can block third-party frames. If the embed works logged-out but not logged-in, or vice versa, suspect this.
- AMP pages, if you still serve them, need `amp-iframe` and will not render a normal iframe.
Frequently asked questions
- How do I embed an interactive demo in WordPress?
- Use a Custom HTML block and paste the iframe from your demo tool -- a Paragraph block strips iframes silently. Preview inside the block, then check the live page, purging any caching plugin first.
- Why does WordPress remove my iframe when I save?
- WordPress strips iframes from content saved by users lacking the unfiltered_html capability -- normally Administrators and Editors on single sites, and often only Super Admins on multisite. If it disappears on save, that permission is the usual cause.
- Do I need a plugin to make an embedded demo responsive?
- No. Wrap the iframe in a relatively positioned div with a percentage padding-top and absolutely position the iframe to fill it. That is about six lines of inline CSS in the Custom HTML block, and it is what the responsive-iframe plugins do.
Keep reading
This is what Demorta does
Click through it — the same kind of demo you can record of your own product.
Try it on your own product
Record your first interactive demo free.
Five demos on the free plan, forever. No credit card, no trial countdown, no sales call. Install the Chrome extension, click through your product once, and you have a shareable link in about ten minutes.
Start free →