Wistia Responsive is a simple and straightforward WordPress plugin I developed while working on the website for the New Saint Thomas Institute (NSTI) that automatically makes all of your Wistia video embeds responsive.
Problem: On the NSTI site, we have lots of video content and we’re using a responsive theme because we know that many of the site’s members would be accessing content on mobile devices, smartphones or tablets. However, we quickly noticed that the Wistia video player was not inherently responsive and was hindering the experience for users on mobile and tablet devices.
The good news is the team at Wistia has a solution in the form of their “video foam” feature currently on their labs site. This works with their iframe api to make your Wistia embedded video players responsive.
The problem is that, because the video foam features uses the javascript iframe api, there wasn’t an easy way to have content authors easily make their videos responsive when generating embeds on Wistia’s site without manually appending the “videoFoam” parameter to the end of their embeds inside of WordPress.
Solution: What we came up with was a simple plugin that first registers the iframe api script needed for video foam to work and then hooks into the_content and the_excerpt filters to automatically append the video foam parameter to the end of all video embeds. The plugin looks for wistia video embeds, adds the video foam parameter, and the rest takes care of itself!
Simply activate the plugin and the rest will happen automatically!
See it in action in the embedded video below. Try resizing your browser or access this page from your phone or tablet and the Wistia player should resize automatically to fit your screen.
The plugin is now on the WordPress Plugin Repository and you can get it by clicking on the following link:
Multisite
- All features should work for each blog in multisite installations but this has not yet been tested.
Feedback
Feedback is welcome!
If you need help, have problems, want to leave feedback or want to provide constructive criticism, please do so here at the Wistia Responsive plugin page.
Follow @anderly on Twitter for updates on this and other plugins.
Installation
- Upload or extract the
wistia-responsivefolder to your site’s/wp-content/plugins/directory. You can also use the Add new option found in the Plugins menu in WordPress. - Enable the plugin from the Plugins menu in WordPress.
- Voila! Your Wistia video embeds will now be responsive!
Changelog
1.0
- This is the first public release.