WordPress is an awesome platform for creating powerful websites. Here’s a quick guide to making Wistia and WordPress go together like PB&J.
Like Wistia’s favorite treat (donuts 🍩), WordPress comes in many flavors. Because of this, how you embed your video varies based on what type of WordPress environment you’re using. Is it WordPress.com or WordPress.org? Are you using special plugins? What about your theme?
There are so many ways to customize WordPress, that one size does not fit all. It can be a pretty variable experience, but this page is here to help.
Let’s start with WordPress.com. Adding video to your posts is super easy, since Wistia is a default oEmbed provider for WordPress. So let’s dive into grabbing that oEmbed URL and sharing your fantastic video.
An oEmbed URL is a simple link that tells WordPress how to embed content from third-party sources (like that cool video hosting platform for businesses you’re so fond of).
To create an oEmbed URL for a video in your Wistia account, select “Use oEmbed URL” under Options on the Embed & Share screen. Take a look-see:
That’ll give you an oEmbed URL like this example:
If you copy and paste that URL into a WordPress post, WordPress will convert the oEmbed URL into an embedded video. It’s.
If you’re curious about the technical details behind oEmbed’s sneaky magic, check out oEmbed.com.
Wistia doesn’t currently offer an opportunity to select the “oEmbed” options from the Popover Embed tab. But that doesn’t mean it isn’t possible. Time to join our secret club!
Creating a popover oEmbed is as easy as adding the
popover=true string to your oEmbed.
So this Standard oEmbed:
It’s as easy as that!
If you want to specify the size of the popover thumbnail (when playing, a popover video will always be responsive in its lightbox), change the
If you’re embedding on your WordPress.org site, you’ll want to use the Standard (or popover) Wistia embed. Just paste your Standard embed code into your post, and you’re good to go!
Since WordPress is highly customizable, these options don’t always work in every situation. We recommend using the Standard, Fallback, or regular popover embed code types first, but if those don’t work, you’ll need to call for backup. That’s where the Wistia WordPress plugin comes in handy.
If you’re having trouble using Standard embeds with your WordPress theme, the Wistia WordPress plugin adds support for Wistia oEmbed URLs. For more information about how that works, see this guide from the WordPress documentation: Embeds in WordPress.
With the Wistia WordPress plugin, you’ll be able to quickly add oEmbed URLs to your WordPress.org site.
The Wistia WordPress plugin also includes the Anti-Mangler, which (as the name implies) protects Wistia embed codes on your website from getting mangled by WordPress. It’s disabled by default, and should only be enabled if you really don’t want to use the oEmbed approach, which is the approach we strongly recommend. The Anti-Mangler is a decent fallback option though, so if you’d like to enable it, head to Settings in your WordPress admin panel, and choose Wistia WordPress. Or on the Plugins page, there’s a Settings link right under the plugin name.
Unfortunately, Wistia is not included in the whitelist for oEmbed providers in all WordPress installations. Fortunately, adding Wistia as a trusted provider isn’t too difficult thanks to WordPress being prepared for this sort of situation.
To start, you’ll want to use the
wp_oembed_add_provider() function, based on WordPress’s own documentation on it. Given the instructions listed in that docuementation in conjunction with the information in our own oEmbed help page this will look like this:
'/https?:\/\/(.+)?(wistia.com|wi.st)\/(medias|embed)\/.*/', ’http://fast.wistia.com/oembed', true);wp_oembed_add_provider(
Once you’ve added that to the functions.php file in your WordPress install, as their documentation indicates, you should be all set to use Wistia media URLs to embed Wistia videos in your WordPress.
When inserting an oEmbed URL, make sure you are in HTML editing mode, and leave a line open above and below the URL. If you switch from HTML to Visual mode it can add formatting tags around your oEmbed URL, which may cause it to break. Be careful of that!
If you have larger resolution videos and they are appearing smaller or squished, access the WordPress admin control panel (Settings -> Media -> Maximum Video Embed Size) and set the max to the largest size of your video (’no limit' setting doesn’t work, it must be actual size). Some WordPress themes will also set a maximum width for content embedded with oEmbed. If you want to change that, check out How to Set oEmbed Max Width in WordPress 3.5 with $content_width.
If you want to center your video inside a
div or column on your website, and you are using an oEmbed URL to embed your video, please use a second div with the style
display: inline-block;, as seen here:
<div style="text-align: center;"> <div style="display: inline-block;"> http://fantastic.wistia.com/medias/60cf0ufhoo?embedType=async&videoWidth=640 </div> </div>
If you’ve tried adding a Standard Wistia embed (or Fallback or popover), and it’s not converting to a video, try installing the Wistia WordPress plugin, and switching to an oEmbed URL.
Still no success? Give us a shout. We’ll be happy to help.
To expedite your support, let us know what theme you’re using (if any), any other plugins you’ve installed, and where you’re pasting the embed code (as a post, into a module in your theme?). This will help us get to the bottom of the issue faster for you!