Easily Auto-Play Your Wistia Videos

Creating a friction-less experience

I’ve got a Wistia Pro Tip for all of you marketers – how to auto-play your Wistia video when somebody arrives to your page using a specific link.

So let’s say that you just created a new video, and you’re sending out an email campaign that has a nice, big thumbnail from your video with a play button on it. When someone receives your email and clicks on the thumbnail, their expectation should be that the video they want to watch begins to automatically play. But what happens all too often is that the thumbnail will take them to a landing page or blog post or some place where the video is embedded – and then they have to click on the video again to actually watch it.

Is this the end of the world? Of course not. But it’s an extra bit of friction that your audience has to push through to get to your content, and you want to make their experience as frictionless as possible. By having a video auto-play when someone clicks through a specific link (like a thumbnail with a play button), you both set proper expectations and give your audience an extra-polished experience.

Auto-Play Your Wistia Video

So how do you make this magic happen? There’s two parts working as a team. The first is this responsive embed code:

<script src="//fast.wistia.com/assets/external/E-v1.js" async=""></script>
<div class="wistia_responsive_wrapper style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;">
<div class="wistia_embed wistia_async_insertHashedIDHere videoFoam=true" style="height: 100%; width: 100%;"></div></div>
<script>
window._wq = window._wq || [];
_wq.push(function(W) {
  var playedOnce = false;
  W.api(function(video) {
    if (!playedOnce && /[&?](insertTriggerHere)/i.test(location.href)) {
      playedOnce = true;
      video.play();
    }
  });
});
</script>

Make sure you replace “insertHashedIDHere” with your Wistia video ID (youraccount.wistia.com/medias/8dsah3kl2a)

The second part is adding a tag into the URL that the thumbnail (or whatever you’re linking from) links to. That tag needs to be in the “insertTriggerHere” spot. Now the URL that your thumbnail links to should be “yourwebsite.com/pagename?trigger”, or, if you’re using ref tags in your URLs, you would have something like “yourwebsite.com/pagename?ref=twitter&campaign=new_cool_video&trigger”.

You might be looking at this and thinking to yourself, “Well, if I’m already using ref tags in my links, why don’t I just make the trigger one of my refs?” And guess what – you totally can! The embed code you’re using is looking for your trigger word within the entire URL, which makes it super easy to just use your ref code as your trigger instead of using a separate trigger word.

The important thing you have to keep in mind here is that currently the code requires your trigger to be directly prefaced by a ? or &. If you have your refs setup in a way where a ? or & is not directly touching the ref you want to use as a trigger, then you need to remove the “[&?]” from the code so it looks for just the word without a ? or &.

Using Multiple Triggers

At this point you’re probably saying to yourself, “Ok, that’s cool and all, but I’m sending this video out using multiple platforms. I’ve got an email campaign, a Tweet, and a Facebook post, and I want the video to auto-play from each separate link. Now what the hell do I do?”

Fear not, brilliant, ever thoughtful marketer, because you can set multiple triggers within the code – all you need is this guy: | – the vertical bar. What the vertical bar does is it allows you to create an OR statement. So, for example, instead of the code looking for just the word “twitter”, you can have it look for “twitter” OR “facebook” OR “email”.

To do this, just combine your different triggers in the “insertTriggerHere” spot like this: “twitter|facebook|email”. Now your embed will automatically play your video when somebody comes from a link with one of those three triggers in it. Just don’t forget to either keep or remove the [&?], depending on your URL situation!

Go Forth and Auto-Play

If you use this code, post a link in the comments – I’d love to see the results! Keep an eye on our blog for more Pro Tips using Wistia’s Player API.

Andy Waplinger

I'm the CEO and co-founder of Medialytics. I'm on a mission to make the lives of content creators everywhere easier and more informed. I love to learn and teach and empower others. I also love puppy GIFs.

This entry has 0 replies

Comments open

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>