Updating Your Popover Embeds
Here's how to keep your popover embeds up to date.
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:
But because of the upcoming changes to Wistia’s infrastructure, they may break and look like this:
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.
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.
We released a new, more robust version of popover embeds back in October.
- 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.
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.
Still confused? Give us a shout. We’ll be happy to help!
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"> </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.
Head to the Embed & Share menu for your video and navigate to the Popover Embed tab. It will look like this:
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!
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.
If you have any questions, don’t hesitate to reach out to us.