Embed Links

Learn how to use Embed Links to setup playlists, chaptering, “watch another video,” and “choose your own adventure”-style navigation without any JavaScript.

Embed Links give you a framework to easily replace a video or control its time using specially formatted links. These links will work anywhere on the page, including in Wistia CTAs and Annotations.

Simple Video Replacement Example

Embed Links are best illustrated by example. Check out the markup below.

<!-- example_embed_link.html -->
<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_30q7n48g4f" style="height:360px;width:640px">&nbsp;</div>
<a href="#wistia_30q7n48g4f">Make French Toast</a><br/>
<a href="#wistia_342jss6yh5">Wistia Team Intro</a><br/>

Here we have a standard inline embed code followed by two links. The links have a particular format. They start with a #, which makes them “anchor links” (URI fragment identifiers). The # is followed by a video’s 10 character hashed ID. A ? separates the hashed ID from a list of optional embed options in the same format as our iframe embeds.

<!-- embed_link_anatomy.html -->
<a href="#wistia_30q7n48g4f?time=30">Make French Toast</a>
<!-- prefix  hashed ID  embed options -->

Check out a live example!

 

“Make French Toast” is embedded by default by the Standard (or async) embed code. When you click a link below that code, it replaces the video with another and automatically plays it.

Simple Chaptering Example

If I only have one video but want to link to various parts of it, I can use the same format as Embed Links. Just make sure the hashed ID is the same as the embedded video. Check it out!

<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_30q7n48g4f" style="height:360px;width:640px">&nbsp;</div>
<a href="#wistia_30q7n48g4f?time=0">Make French Toast @ 0</a><br/>
<a href="#wistia_30q7n48g4f?time=10">Make French Toast @ 10</a><br/>
<a href="#wistia_30q7n48g4f?time=20">Make French Toast @ 20</a><br/>
<a href="#wistia_30q7n48g4f?time=30">Make French Toast @ 30</a><br/>

Note that I’ve just modified the “time” embed option for each link, and the hashed ID 30q7n48g4f is the same as the video I initially embedded.

Watch Another Video in CTA/Annotation

You can easily add “Watch Another Video” functionality using embed links. In a CTA or annotation, just make the URL #wistia_{hashedid}, where “{hashedid}” is the video you want to play next.

Embed Links Call to Action Embed Links Annotation

To get the hashed ID for a video, refer to the URL of the page in Wistia. The alphanumeric characters following “/medias/” are what you want. For example, in the example below, the hashed ID is z1fxq584qr.

Embed Links example hashed ID from URL

Here’s an example:

Beware: Testing this while the Customize Panel is open confuses things quite a bit. To make sure it works, you’ll need to save your customization then reload the page.

Special Playlist Options

This allows you to associate embed links on the page with a video, thereby turning it into a playlist. Accepts any string, but “auto” and “manual” are special values. Refer to the Advanced Embed Links Targeting section below to learn how to use this effectively.

playlistLoop

When the last video finishes, embed and play the first video again. Default is false.

<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_30q7n48g4f playlistLinks=auto playlistLoop=true" style="height:360px;width:640px">&nbsp;</div>

Notes

Standard embed codes only. This does not work with iframes (fallback) or popovers.

Embed Links should exist in the DOM within 5 seconds of the video being embedded. Otherwise, you’ll need to run Wistia.EmbedLink.setupAll() right after they’re injected so that they work.