How do I embed Wistia Videos in Knack Database fields?

 
screens-showing-code.jpg

Embedding Wistia Videos in Knack

Background

We use Wistia for Video hosting and embedding because it offers paywall, turnstiles, calls to actions, and numerous other powerful professional features that make it an indispensable tool for hosting video. (More here)

For a number of years we've embedded Videos within the rich text field in Knack from Wistia using either the inline embed or the pop-over embed. We use Knack to create the membership platform and offer tailored content to different cohorts of users and it's vital that video is part of the media portfolio.

They work perfectly everywhere - with one minor problem in Knack....

Specific Problem

Within the rich text field type, you can open the code editor in the front end UI and insert the embed code, save and leave the field and everything works as you'd expect - the videos play in the builder, and in the app.

If however you ever need to go back to the field, the Knack Rich Text editor strips the script content from the video embed. So the video stops working, and has to be re-embedded to reinstate the removed scripts. Frustrating.

The Cause

There are actually two scripts at the beginning of the embed. The first is highly specific to the video you are embedding, the second is a generic Wistia script.

During a conversation with Knack in the fall of 2018, it became apparent that this method was shortly to become impossible altogether. Script embedding within rich text is/was being phased out. Apparently it presents some challenges and Knack are planning to remove script functionality withing rich text fields altogether.

We needed an alternative approach.

The Solution.

It took a couple of days of head scratching to try to figure out an alternative way of embedding Wistia videos inline without specific per video scripts. The answer lay in a little publicised embed method that is only mentioned in the developer docs of Wistia and not in the 'Embed and Share' dialogue.

It's not new news, but iFrame was about to solve the problem.

Initially we overlooked iFrame embed because the native embed code supplied by Wistia for the iFrame method also includes a script tag. At face value, this didn't move us forward. However the iFrame embed works perfectly well as a basic player with customisations without the script. This is because the script also lives at the iFrame src URL and so the iframe element works just fine without the script!

However, embedding without the script does have some specific repercussions:

  • While video stats will work, all "page' attribution for specific views/heatmaps will show the source being the iFrame src, no the page where the video is embedded
  • Any integrations that rely on on-page tracking (eg Google Analytics, or Hubspot/Pardot/Marketo marketing integrations) will not work
  • the Wistia domain restrictions security feature will not work as the player will not be able to properly detect the page referrer URL. (This is often a problem with certain CMS platforms anyway, so even with the scrip, this feature is not guaranteed to work

Step 1. Prepare your Knack App

Note:The iFrame player from Wistia does work stand alone, but you can also load the script via the Javascript embed. (wait....) this script is not video specific - so it could be called at the end of a page load. Because this script applies to all the videos you're likely to load from Wistia, it can be placed in the App wide javascript.

We adapted some Javascript and added the following to the Javascript injection point in Knack Builder1:

// In the Builder
KnackInitAsync = function ($, callback) {
// REQUIRED: Explicitly include jQuery
 window.$ = $;
 // Load the file from wherever it is hosted
 LazyLoad.js(['//fast.wistia.net/assets/external/e-v1.js'], function () {
console.log('Loaded external files!');
// REQUIRED: Tell the Knack app to go ahead and finish loading
callback();
  });
 }; 

Step 2 - get your Video ID

Obtain the video ID. This is displayed in the address window when you are playing your video in Wistia or can be obtained via the 'Share Link' in the embed and share menu. it looks like (this is a example and will not work)

sx70pqxw94

Step 3 - Create your iFrame Embed.

We looked into iFrame embeds at Wistia and copied this code from their advice.

 <iframe 
         src="//fast.wistia.net/embed/iframe/[sx70pqxw94] videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen"
         webkitallowfullscreen="webkitallowfullscreen"
         oallowfullscreen="oallowfullscreen" msallowfullscreen="msallowfullscreen" width="692" height="389"
         style="width: 692px; height: 389px;">
</iframe>

The only part of this embed that changes from one to the next, is the video ID. Once you have created the embed code, and inserted the javascript, the only thing that varies is the video ID.

Summary

Using this technique, it's possible to embed Wistia videos inline within a rich text field without using per record scripts. It's an obscure problem but I hope that helps, - please add a comment or ask a question if I can help.

Chris Bampton. The Isoblue Partnership.


  1. Note the location and name of the script location may vary over time, but it's correct at the point of writing (December 2018) This is the most up to date scripts that is advised by Wistia. ↩︎