Thursday, February 14, 2013

How to Make Video Transcripts in Wistia Toggle On and Off

Wistia is a great alternative to YouTube that offers some great video SEO benefits. One of the biggest of those benefits is their integration of interactive transcripts. However, in the default player, when transcripts are enabled, there is no way for an end-user who may not want to see the transcript or who perhaps finds it distracting, to turn the transcript off or close the transcript window.

Thanks to the fabulous customer support at Wistia, I raised this question and they were kind enough to provide me with sample code and instructions on how to use an expandable/collapsible <DIV> to accomplish just that. 

NOTE: You have to select the "API" embed code not the <IFRAME> embed code in order for this to work. This is really better for your SEO anyway, because the SEO benefits derived from the interactive transcript are completely lost when that content is buried in an <IFRAME> because search engines cannot crawl any content that's inside an <IFRAME>.

Here's a sample of the regular API embed code (remember to copy-and-paste this sample into a plain text editor like notepad before you try to do anything with it - otherwise strange and mysterious things could occur, not all of them pleasant):



<div id="wistia_e9daad32af" class="wistia_embed" 
style="width:580px;height:526px;" 
data-video-width="580" data-video-height="326">&nbsp;</div>
<script charset="ISO-8859-1" 
src="http://fast.wistia.com/static/concat/E-v1%2Ctranscript-v2.js">
</script>
<script>
wistiaEmbed = Wistia.embed("e9daad32af", {
  version: "v1",
  videoWidth: 580,
  videoHeight: 326,
  playerColor: "81b7db",
  plugin: {
    "transcript-v2": {
      position: "below"
    }
  }
});
</script>
  
Here's the sample of the code with the collapsible interactive transcript box positioned at the bottom of the video:

<div id="wistia_e9daad32af" class="wistia_embed"  
style="width:580px;height:326px;" 
data-video-width="580" data-video-height="326">&nbsp;</div>
<script charset="ISO-8859-1" 
src="http://fast.wistia.com/static/concat/E-v1%2Ctranscript-v2.js">
</script>
<div id="my_sweet_sweet_transcript" style="width:580px;"></div>
<script>
wistiaEmbed = Wistia.embed("e9daad32af", {
  version: "v1",
  videoWidth: 580,
  videoHeight: 326,
  playerColor: "81b7db",
  plugin: {
    "transcript-v2": {
      position: "below",
      container: "my_sweet_sweet_transcript",
      canCollapse: true,
      collapseOnload: true
    }
  }
});
</script>
 
Here's how to make it happen:


1.     First, change the height in the style of the first div so that it is 200 pixels less (that's  how tall the transcript box is). In this example, I changed it from 526 to 326.


2.     Second, add a div with an id (whatever you want, really) and add a style to it that dictates the width to be the same as the video. In this example, both are 580 pixels wide.


3.     In the script section below, inside the transcript plugin section, you need to add a couple lines. The first is "container: id" which should reference the id you gave the div you added a moment ago. The second attribute is "canCollapse: true" so that the box knows it can collapse. Lastly, and this one is optional, add the attribute that tells the box to default to closed "collapseOnLoad: true"

Don't forget commas after the attributes that aren't the last in the curly brackets, and that the collapsible transcript div you added must be above the scripts you edited!

I would like to give a shout out to Jordan Munson (@jordanmunson), Customer Champion at Wistia for being gracious enough to allow me to post this information. Follow Wistia on Twitter @Wistia

Post a Comment