How to Add Wistia Videos in WordPress

If you paste a Wistia video link into WordPress or a page builder and it doesn’t turn into a player, you can paste Wistia’s embed code instead. The code below is a responsive iframe embed: it keeps the video at a 16:9 ratio and scales it to the width of its container.

Add it with a Custom HTML block in the block editor, or with the HTML module or widget of your page builder.

<div class="wistia_responsive_padding" style="padding: 56.25% 0 0 0; position: relative;">
<div class="wistia_responsive_wrapper" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;"><iframe class="wistia_embed" src="//fast.wistia.net/embed/iframe/apmwndqiq8?videoFoam=true" name="wistia_embed" width="100%" height="100%" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe></div>
</div>
<script src="//fast.wistia.net/assets/external/E-v1.js" async=""></script>

How it works

• The outer wistia_responsive_padding div has a top padding of 56.25%. That’s 9 divided by 16, so the box always keeps a 16:9 shape.
• The inner wrapper is positioned absolutely to fill that box, and the iframe fills the wrapper, so the video resizes with the page.
• apmwndqiq8 in the iframe URL is the video’s ID. Replace it with your own, or copy the complete embed code for your video from Wistia.
• The E-v1.js script loads Wistia’s JavaScript for the embed, asynchronously so it doesn’t hold up the page.

WordPress strips iframes and scripts from content saved by users without the unfiltered_html capability. On a single site, Administrators and Editors have it; on Multisite, only Super Admins do. If the video disappears after saving, that’s the likely reason.

The solution comes from this Beaver Builder community thread about Wistia oEmbed links not working.

Related articles

• fixing HTML5 video autoplay on iPhone: if you host the video file yourself
• autoplaying a video when it scrolls into view: for self-hosted HTML5 video