THE VIDYARD BLOG

Video Marketing Resources, Inspiration & Tactics

‘Choose Your Own Adventure’ Videos Using Call to Actions

By in Video How-To

Create a “choose your own adventure” video using Vidyard’s customized Call to Actions. This feature allows you to watch a video, which ends with a final CTA containing several links. These link to more video players which, when clicked, cause the linked player to load in the same frame on the page.

A very powerful feature we have here at Vidyard is the ability to create fully customizable Call To Actions (CTAs), which come in two varieties: Pop-out CTAs and Final CTAs. One very creative use of our final CTA functionality is to create a “Choose Your Own Adventure” style set of videos. In this case, the viewer watches an initial video, which ends with a final CTA containing several links. These link to more video players which, when clicked, cause the linked player to load in the same frame on the page. This new player can also have the same style of final CTA and link to even more players, thus creating the “adventure” style method of viewing several different videos.

Setting up this style of final CTA is fairly straightforward; it requires some basic HTML knowledge and a server to host the final CTA HTML filesm (Vidyard doesn’t host the final CTA pages at this time.)

First Step: Upload all the videos you wish to have as part of the “adventure” into their own, separate players. For each of these players, you will need the URL containing the fallback IFrame embed code for the next step. This embed code can be found here:

1

From this embed code, you want the value of the src attribute, which should look something like this:

http://api.vidyard.com/playbackengine/EXAMPLE

Second Step: We need to create the final CTA that will star the “adventure”; this is just a normal HTML file that the Vidyard IFrame will redirect to at the end of the vide. This HTML will include links to the URLs IFrame embed codes that you obtained from all of your players. The default behaviour in browsers for links in IFrames is to open in the current frame. In other words, the default is target=”_self”), so no target attribute is needed.

Here is a very basic example.

Upload this HTML file into a publicly accessible area of your webserver or host and obtain the URL that links to this file.

Third Step: In the player details page for the first player, place this URL in the Final CTA section. Make sure that you do not select the option to “Redirect the whole page, not just inside the player” – by selecting it, the final CTA will load in the parent page, not just the original Vidyard IFrame.

2

You can repeat these steps and have the final CTA that appears in the initial player, replicated for each player to create an additional layer of depth to the adventure style videos; you can continue to repeat this as many times as you wish.

You can also link back to the first payer if you wish to provide viewers the option to watch it again. The power is in your hands! For a real life example, watch the video below:

Learn more about Call to Actions and how they can work for your videos!

3

Tyler is a lead developer at Vidyard, specializing in everything front-end. If something is even a single pixel off center, he will be the first to notice and dive head first into the code to fix it with his CSS and JS wizardry.

Load Comments

Michael is the CEO and Co-Founder of Vidyard. In addition to growing Vidyard’s success, he is actively involved in the technology sector, acting as a mentor to various early stage companies.