Creating a download button for Wistia videos

Here is how you can quickly add an external download button for Wistia videos

When you upload a Wistia video you have the option to allow people to download it.

You do this by going into “edit” for the video, clicking “Video Actions”. Make sure “Share” is on and turn off everything within share except “Download”. You will see a “Configure” section by download. Make sure “Original” is selected.

Depending on how you want your video displayed and how you want your users to interact with it, you might decide you an an external button to trigger the download.

It turns out this is fairly easy to implement, just a small amount of Javascript really.

Here is the JavaScript you would need.

var downloadVideo = function() {
  document.querySelector('[data-channel=download]').click();
};

It forces a click on the HTML element that has an attribute data-channel with the content download.

This code assumes there is only one Wistia video on the page, but using other attributes to limit what happens here should be easy enough.

Here is the most simple form of the HTML you would need, of course you probably will have an event listener for this;

<button onClick="downloadVideo()">Download Video</button>

And that is it! I hope this helps someone.

Recent posts View all

Talk CSS

FrontEnders - Web Performance

Sharing some of my thoughts on a FrontEnders meetup on the topic of Web Performance

Talk

Tips for how to ask for time off to attend conferences

Asking for time off to attend a conference can be nerve-racking, these tips will get you closer to attending the conferences you're interested in.