Wistia video embeds

If you're using Wistia as a source for video, we've noticed some quirks with Wistia and wanted to save you some headache by sharing them.

These quirks vary based on whether you're using a Standard embed or a Fallback embed:

Wistia Standard embeds

Wistia's recommends you use a "Standard" embed, which creates an embed code with two scripts and at least one div in it. The embeds look a bit like this:

<script src="//fast.wistia.com/embed/medias/j38ihh83m5.jsonp" async></script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_j38ihh83m5" style="height:349px;width:620px">&nbsp;</div>

There are two basic quirks with this type of embed in KnowledgeOwl:

• These embeds cannot be added using the standard Insert Video > Embedded Code workflow (they must be added in Code View)
• Once added, these embeds won't show a thumbnail or placeholder in the editor itself, but they will show in Preview or in the Published version of the article

We discuss these more below.

How to add a Standard Wistia embed code

Our Insert Video Embedded Code functionality expects an iframe only, and since it doesn't know what to do with the scripts, it won't complete the insert.

If you're using this embed code type, instead of using the Insert Video option:

1. In Wistia, copy the Standard embed code.
2. In the KnowledgeOwl editor, get your cursor to the place you'd like to add the video.
3. Use the </> button in the upper left to open Code View.
   
4. Paste your embed code by using Ctrl + V or right-clicking and selecting Paste.
   
5. Save your changes.

Showing a Standard embedded Wistia video in the editor

Off the shelf, once you add a Standard Wistia embed code, the editor actually won't show anything. Why? Because the thumbnail and video player depend on the Wistia scripts running, and our editor won't allow those scripts to run. If you click where you pasted in the code, you'll see "Div" is displayed in the upper left.

You can see the video by Previewing the article, or by saving it and viewing the published article.

While we can't force these scripts to run to show the thumbnail, you can add some custom CSS to create a visual signal that a video's been uploaded. We like to use a background color for the video player div and a video icon, but the simpler approach is just to use the background color. See below for both sets of steps:

Adding a color to the video placeholder in the editor

This will allow you to set a color for the video placeholder in the editor only. To start, you'll need to know what color you'd like to use (we use a light grey). Then:

1. Go to Settings > Style.
2. Below the preview pane, be sure Custom CSS selected.
3. Copy this code and paste it into that pane:

   /* Add background color to Wistia Standard placeholder in Editor */
   .fr-view.hg-article-body .wistia_responsive_wrapper,
   .cke_editable .wistia_responsive_wrapper {
       background-color: #d3d3d3;
   }

4. If you'd like to use a different background color, change the hex used for background-color.
5. Save your changes.

Once saved, you'll see the background-color you selected applied to the div placeholder for the videos in both Modern and Legacy editors:

Adding a color and icon to the video placeholder in the editor

For a slightly fancier treatment, we add a video icon to the File Library and include that as a background image. To do something similar:

1. Save this video camera icon to your computer: video-solid.png
2. Go to Library > Files.
3. Click + Add Files and upload the icon there.
4. Once it's uploaded, select the file and copy the URL for it. See Find a file's URL for more details.
5. Now go to Settings > Style.
6. Below the preview pane, be sure Custom CSS selected.
7. Copy this code and paste it into that pane:

   /* Add background color and video icon to Wistia Standard placeholder in Editor */
   .fr-view.hg-article-body .wistia_responsive_wrapper,
   .cke_editable .wistia_responsive_wrapper {
       background-color: #d3d3d3;
       background-image: url("my-url/video-solid.png");
       background-repeat: no-repeat;
       background-position: center;
   }

8. Replace "my-url/video-solid.png" with the URL of the file you uploaded in Step 3. It should remain in quotation marks.
9. If you'd like to use a different background color, change the hex used for background-color.
10. Save your changes.

Your code should look something like this:

Once saved, you'll see the background-color and graphic you selected applied to the div placeholder for the videos in both Modern and Legacy editors:

Wistia Fallback embeds

Wistia Fallback embeds work a bit better in the KnowledgeOwl editor. These embed codes do generate an iframe, so you'll get a thumbnail/preview in the editor. They generally look a bit like this:

<iframe src="//fast.wistia.net/embed/iframe/avk9twrrbn" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="620" height="349"></iframe>
<script src="//fast.wistia.net/assets/external/E-v1.js" async></script>

The main quirk with these embeds is the script file referenced in them.

If you use Insert Video > Embedded Code and try to paste both the iframe and the script code in, the insert won't complete, because this insert doesn't support scripts.

If you use Insert Video > Embedded Code and paste the iframe portion of the embed code in by itself, the insert will succeed and you'll see the video thumbnail in the Editor.

However, according to Wistia's documentation, using the iframe by itself bypasses some of the SEO benefits provided by the Standard embed. The script file included in the embed code basically includes all of those SEO benefits.

There are two ways you can include this functionality:

Add the full Fallback embed code in Code View

Instead of using Insert Video > Embedded Code:

1. In Wistia, copy the Fallback embed code, including the iframe and script code.
2. In the KnowledgeOwl editor, get your cursor to the place you'd like to add the video.
3. Use the </> button in the upper left to open Code View.
   
4. Paste the embed code with the full iframe and script code by using Ctrl + V or right-clicking and selecting Paste.
5. Save your changes.

Add the iframe code only and add a snippet containing the script

If Code View is not a good workflow for your content editors/creators, we recommend:

• Creating a snippet that contains the Wistia smart player script.
• Using the Insert Video > Embedded Code to add the iframe embed code only.
• Adding the Wistia smart player snippet to the article.

This is a little more setup work initially, but it means the insert process can happen fully in the WYSIWYG portion of our editor, rather than Code View.

First, set up the snippet with the Wistia smart player script:

1. In KnowledgeOwl, go to Library > Snippets.
2. Create a new snippet. (See Creating a snippet for the full set of steps.) We recommend using "Wistia script" or something similar as the name.
3. Copy the Wistia Smart Player script from one of your embed codes (or from their documentation here: https://wistia.com/support/integrations/hubspot#make-sure-e-v1-js-is-on-the-page). At the time we wrote this page, the code looked like this:

   <script src="//fast.wistia.net/assets/external/E-v1.js" async></script>

4. In your new snippet in KnowledgeOwl, click the Code Editor button.
5. Paste in the script HTML you copied in step 3.
6. Create your snippet.

Your snippet should look something like this:

With the snippet created, you'd then follow this process to add a Wistia Fallback embed to any article:

1. In Wistia, copy the iframe portion of the Fallback embed only. For example:
2. In the KnowledgeOwl editor, select Insert Video.
3. Use the Embedded Code option.
4. Paste your iframe code in, and select Insert.
   
5. Anywhere in the article, select Insert Snippet (two gear cogs icon) from the editor taskbar.
   
   The Insert Snippet editor control
   
6. Search for your Wistia Player Script snippet (or whatever you called it).
7. Insert that snippet.
8. Save your article.

The iframe will upload properly through Insert Video, and the snippet will ensure you get the full SEO benefits.