Updating Your Popover Embeds

Here's how to keep your popover embeds up to date.

Updating Popover Embeds Before February 1, 2016

On February 1, 2016, Wistia will be making a change to one of our CDN providers. This infrastructure update will affect old popover embeds using SSL created before 2013.

If your popover embeds are affected, you’ll need to replace the old code with the new popover code. The good news is that this change will improve the user experience for you and your viewers, since the new popover embeds are more reliable and versatile.

Normally, your popover embeds should look like this:

screenshot of working popover thumbnail

But because of the upcoming changes to Wistia’s infrastructure, they may break and look like this:

screenshot of broken popover thumbnail

Why Are We Making This Change?

To continue improving our service for customers, we sometimes need to switch up the vendors we’re working with. We are moving away from one of our content delivery network (CDN) vendors on February 1, because we have added other CDNs that are faster and more reliable.

Previously, thumbnail images were hardcoded into the old popover embed codes. These thumbnail files live on the CDN that will be deactivated.

What Do I Need to Do?

You will need to re-embed your videos using the new popover embed code. If your account was affected, your Account Owner should have received an email with a list of the embeds that you’ll need to replace.

Don’t worry, at the bottom of this page you’ll see step by step instructions on how to create a new popover embed code.

Why is the New Popover Embed Code Better?

We released a new, more robust version of popover embeds back in October.

  • With the new popover embed, we inject the thumbnail file with JavaScript. This way all of the files are served directly by Wistia, rather than an external CDN.
  • The new popover embed is responsive just like the standard embed, which means it can adapt to your website’s style based on the device or size of the browser window.
  • The best part is that the new popover embed comes with Wistia’s full SEO benefits. Once you embed a popover, JSON-LD metadata is injected directly onto your page, giving it an SEO boost.

Where Are My Old Popovers Embedded?

If you’re on this page, you’ve received an email with a list of embeds that will need to be updated.

If you’ve forgotten where your old popover embeds live, you can go to the video stats page for the videos we shared with you and open any viewers' heatmap. There, you’ll find the URL where the video was viewed, and voilà, now you know which page you’ll need to update.

screenshot of popover embed URL in heatmap

Still confused? Give us a shout. We’ll be happy to help!

Old Popover Embeds vs. New

Now that you know which page you’ll need to edit, let’s take a look at the old embed code in comparison to the new one.

Your old popover embed code will look something like this:

<! — popover_example.html — >
<a href="https://wistia.sslcs.cdngc.net/embed/iframe/elhrbf4rb?popover=true" class="wistia-popover[height=360,playerColor=84afde,width=640]"><img src="https://embed.wistia.com/deliveries/kehrb3i4978bq38ofybq4o8ff4y28yf2edwrg/file.jpg" /></a>
<script charset="ISO-8859–1" src="http://fast.wistia.com/assets/external/popover-v1.js"></script>

Your new popover embed code will look something like this:

<! — popover_example.html — >
<script charset="ISO-8859–1" src="//fast.wistia.com/assets/external/E-v1.js" async></script><span class="wistia_embed wistia_async_k9bmbixozg popover=true popoverAnimateThumbnail=true" style="display:inline-block;height:207px;width:368px">&nbsp;</span>

While the codes are different, the popover player looks essentially the same. One of the only big differences is that the “Close Window” icon has been redesigned and simplified.

screenshot of old and new close window icons

How to Update Your Embeds

Head to the Video Actions dropdown menu for your video and choose Embed & Share. Navigate to the Popover Embed tab. It will look like this:

screenshot of popover options in embed and share modal

You can customize the display of your popover using the Options box. Plus, with the new popover embed, you can now have a responsive thumbnail!

screenshot of popover embed options

When you’re happy with the way your preview looks, copy the new code and use it to replace the old popover embed in your website’s editor. Be sure to read the section on Responsive Design with Popover Embeds for more information too.

Tip
If you would like to modify the behavior of your popover embed beyond what the options in the Embed & Share screen provide, check out the Popover Customization page.

If you have any questions, don’t hesitate to reach out to us.