Advanced Wistia Embed Customization

We think Wistia Super Embeds are pretty awesome. They make it easy for web video to look it's best. But sometimes our customers might be looking to do even more customization. This doc page will help answer some of the questions that come up with Wistia embed options.

Wistia's popover implementation utilizes Fancybox, a plug-in for jQuery. The Fancybox API gives access to all kinds of custom effects and settings that Wistia users can access. Here are a few of our favorites that we've helped customers implement:

If you're shooting video with light-colored backgrounds, a border can add definition to the video. See an example of this effect.

Add this style to your CSS, or inline in between tags.

 #fancybox-content {
    border: 5px solid black !important;
  }
  
  #fancybox-outer {
    padding-right: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
  }

Sometimes, you want to completely hide the content behind the video popover. Or, you'd like to change the color that shows up to better match your overall site color scheme. Here is how to change the Overlay Color and Opacity for your Popover (click here to experience the effect ).

To do this, you'll need to add attributes to the Inline styling for the Fancybox implementation.

Here is the normal Popover code:

<a href="http://fast.wistia.com/embed/iframe/e6bfb5acbd?videoWidth=640&videoHeight=360&controlsVisibleOnLoad=true&autoPlay=true&popover=true"
class="wistia-popover[width=640,height=360,playerColor=#636155]"><img src="http://embed.wistia.com/deliveries/d88b25fd28dda2795fa3c754f6d08221cfb8b206.jpg?image_play_button=true&image_crop_resized=150x84" /></a>
<script charset="ISO-8859-1" src="http://fast.wistia.com/static/popover-v1.js"></script> 

Inside the “class” area, we're going to use 'helpers' to add this additional functionality:

helpers.overlay.css.backgroundColor=#000,helpers.overlay.opacity=1,padding=20

We also added padding, to provide that 'picture frame' effect around the video.

The final embed code looks like this:

<a href="http://fast.wistia.com/embed/iframe/e6bfb5acbd?videoWidth=640&videoHeight=360&controlsVisibleOnLoad=true&autoPlay=true&popover=true"
class="wistia-popover[width=640,height=360,playerColor=#636155,helpers.overlay.css.backgroundColor=#000,helpers.overlay.opacity=1,padding=60,]'>click here to experience the effect</a><script charset="ISO-8859-1" src="http://fast.wistia.com/static/popover-v1.js"></script>

Just like the color and opacity above, adding a title/caption to your popover involves the use of helpers.

Let's start with the same embed code as above:

<a href="http://fast.wistia.com/embed/iframe/e6bfb5acbd?videoWidth=640&videoHeight=360&controlsVisibleOnLoad=true&autoPlay=true&popover=true"
class="wistia-popover[width=640,height=360,playerColor=#636155,helpers.overlay.css.backgroundColor=#000,helpers.overlay.opacity=1,padding=60,]'>click here to experience the effect</a><script charset="ISO-8859-1" src="http://fast.wistia.com/static/popover-v1.js"></script>

Now, let's add the following to the 'class' area:

title=<center><strong>SuperEmbeds Rock!</strong></center>,helpers.title.type=inside,

We just added the title content (with the 'title=' entry) and set the title to display inside the popover frame (with the 'helpers.title.type=inside' entry). Other options for the title type include 'float', 'outside', and 'over'. Play around to see which you like best.

To see what this looks like, check this Popover with Title example.

You'd like to send viewers a URL that they can open, and the popover will automatically display.

$(document).ready( function() {
var url = window.location.href.toString();
if ( url.indexOf('launch-the-popover') != -1 )
{
  wistiaJQuery('a[class^=wistia-popover]').first().click();
}
});

If you have more than one popover on the page, you'll want to add an ID onto the link, so you can launch specific popovers.