I’ve recently had the opportunity to do some work with Wistia videos embedded into a website and had the challenge of having events trigger from the videos. In my case, I wanted some JavaScript to run after the videos concluded. Specifically, I was working with the Sensei WordPress plugin from WooThemes and wanted to hide the “Complete Lesson” button until the video being watched was over. The reason for this was that I was building a training portal where learners needed to watch a video before they could complete the lesson.
We wanted to avoid any complicated quizzes and this seemed like the most elegant solution. Actually implementing it, however, posed a challenge. What I did was hide the element via CSS and then planned to have some JavaScript reveal it once the the video finished.
For this, we need to get in touch with the Wistia JavaScript API. So first things first, we need to enqueue the scripts for both the API and our own custom JavaScript. The API is hosted on Wistia servers, and for my own script, I just created a file in my theme directory called “wistiafunctions.js”. To enqueue them, I put the following code in my theme’s functions.php:
1 2 3 4 5 6 7 8 9 10 |
function load_wistia() { wp_enqueue_script( 'Wistia-JS', '//fast.wistia.net/static/iframe-api-v1.js', array(), false, true ); } function load_wistia_script() { wp_enqueue_script( 'Wistia-Functions', get_stylesheet_directory_uri() . '/wistiafunctions.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'load_wistia'); add_action( 'wp_enqueue_scripts', 'load_wistia_script'); |
I could easily have combined those two functions so that they would be enqueued at the same time, but that’s how I ended up and I’m standing by it. You can do it however you want! The two functions specify the script locations, and also the default parameters for the most part except that “true” at the end: What that does is put my script in the footer. The documentation from Wistia suggests placing the code AFTER the embedded video so that’s what I did.
Then I needed to fill out wistiafunctions.js with the code that would un-hide my element. Here is what I came up with:
1 2 3 4 5 |
wistiaEmbed = jQuery(".wistia_embed")[0].wistiaApi; wistiaEmbed.bind("end", function() { var myElement = document.querySelector(".lesson input[type='submit']"); myElement.style.display = "inline-block"; }); |
It calls to the API, then runs a function when the “end” event happens; that is, it will trigger when the video is finished.
All that’s left now is to embed the video itself! Guess what? You can use the standard inline iframe embed code! That’s right, no need to do anything fancy there. Easy!
Note that this code will of course be loaded on every single page since we don’t have anything narrowing it down. If you REALLY wanted to do things right, you might just want to do something about that. But that’s up to you!
3 Comments on “Trigger JavaScript from Embedded Wistia Video – WordPress Tutorial”
Hey,
This is a great article and is exactly what I am trying to do, except I am not using Sensei, but rather WPCourseWare and Wistia in WordPress with the Enfold theme. I’m trying to get this to work on a site I’m helping develop and was wondering if this will work using oEmbed or just the inline iframe?
I look forward to your reply.
Thanks…
The documentation on their API should give you that answer, but I’m sure it works with either!
Thanks for your speedy reply. Where did you place the css to hide the button? I used display: none. If I place it in the the Enfold child theme folder styles.css file, with the selector I want to use, it does not work (I’m trying to keep things in the theme’s child folder so hopefully, this customization won’t break with WordPress and Enfold updates. ), but in the WP CourseWare wpcw_frontend.css it hides, however, it doesn’t unhide after the video ends, regardless of whether I embed using oEmbed or inline iframe. I haven’t been able to figure out what I’m doing wrong so far. I’m not a full fledged developer yet, but working on it.
Thanks