Wistia has grown in a lot of popularity as a video hosting service with a lot of premium options, however, many WordPress plugins still don’t work well with it.
The good news is, anywhere that you can put an HTML5 video with mp4 extension, you can put a Wistia video. All you have to know is how to generate the URL.
This solution is great for use with Revolution Slider, Layer Slider, Elementor, or many other locations in WordPress where you can put an HTML5 video.
This solution is courtesy of the video from Live Wire Films, I just wanted a short set of notes that I could easily reuse for the future rather than having to wade through an 11 minute video.
Get your Wistia video ID and API Key
The first step is to grab your Wistia video ID. Log into your Wistia account and find the video you want to use, for example I’ll use this one about SEO from The Guerrilla.
The full URL is: https://theguerrilla.wistia.com/medias/powrymxakj
That makes the video ID: powrymxakj
Next, I need an API key from Wistia. In your Wistia dashboard go to the upper right and click on “Account” and then “Settings”. Under “Advanced” look for API Access. There will be an existing “Master Token”, but you can also generate an additional token if you’d like. Copy it using the copy button.
The API key will look something like this (this is not a real API key): 3ecf4d8sk3njd937f77e646b39skn3h8e9b771f9afe3df7577fe764833lk2f8e17
Now, you are going to take your video ID and your API Key and combine them.
https://api.wistia.com/v1/medias/VIDEO_ID.json?api_password=API_KEY
So if I use my example values, the resulting URL would look like:
https://api.wistia.com/v1/medias/powrymxakj.json?api_password=3ecf4d8sk3njd937f77e646b39skn3h8e9b771f9afe3df7577fe764833lk2f8e17
Build your mp4 video from Wistia
Put the URL you create into your web browser and visit the page. You will see a lot of code produced as a response. You are looking for the video that corresponds to the ‘OriginalFile’. There are other files for other video sizes which you can use if those better meet your needs.
In the below image you’ll see where I searched on Original and highlighted in blue is the URL I want.
I’m now going to make a couple of changes to that URL, the first is I will replace “http://embed.wistia.com” with “https://embed-ssl.wistia.com”.
The second is I will replace “.bin” with “/reel.mp4”. Here is the resulting URL I get:
https://embed-ssl.wistia.com/deliveries/0efe3092783aa2a37e19c34b739f22f2/reel.mp4
If I open that link in a new browser window, I’ll get the video! I can now use that mp4 URL wherever I would normally insert an HTML5 video.
Note that the settings you applied in Wistia to the video will not matter for the generated mp4 video. This means if the original video you uploaded to Wistia had sound and you set the settings to mute it, those settings will be ignored and the video will have sound. But most plugins which provide for background video have options to mute the video.
Adding Wistia Videos in Elementor
Another great use of this feature is adding Wistia to video elements in Elementor.
Elementor has options to source video from Youtube, Vimeo, DailyMotion or Self Hosted. You’ll want to use the Self Hosted option and then turn on External URL. This will give you a spot to put your URL.
