Skip to main content

On April 3rd, 2017 Vidyard will be switching to a new user interface. Click here to learn more.

Vidyard Knowledge Center

Make your player interactive with advanced annotations

Advanced annotation events appear within a player while a video plays, allowing you to enrich your video content with just about any extra content you need.

This allows you to add rich interactivity to your video right from inside the player. You can add in-player downloads, links to shopping carts or other videos, surveys, and more. Vidyard annotations are incredibly flexible, giving you the power to customize them for just about any use you can dream up.

Requirements

  • Advanced annotations will only display on players viewed in supported browsers. They will not display on mobile devices.

Go to your player's Events tab

From the Content menu click Players.

Hover your cursor over the player and click Events.
Hovering over a player to click Events.

Add an advanced annotation

  1. In the Events tab, click to select the video where you want to place your events.
    Under the Events tab, each video in your player is listed. You must select the video where you want the event to appear.
     
  2. In your event timeline, click to select the approximate time where you want your annotation to appear.
  3. Click + Add Event
    + Add Events button
     
  4. Click Annotation, then click + Add Event

Style your annotation 

  1. The Annotation Styler will appear. This allows you to style the annotation container - you will add content to the annotation after this step.
  2. Drag to resize the annotation, or set the annotation dimensions in pixels in the width and height fields.
    Note: The player size is shown as read-only for reference. 
    The annotation preview is found above the style options.
     
  3. You can drag to move the annotations, or set a precise location in the Position fields by setting pixels from the left or top. 
    You have position fields where you can position by pixels, or you can drag and drop.
     
  4. Click the background color selector to change the color of the annotation container.
    The top right corner of the annotation style fields has the color editor.
     
  5. Use the Background Transparency slider to set the transparency for the annotation container. You can also set the transparency as a percentage. 
    The background transparency slider is below the position fields.
     
  6. Use the Content Transparency slider to set the transparency for the annotation content. You can also set the transparency as a percentage. 
    The lower left corner has a content transparency slider.
     
  7. Once you are happy with the style of your annotation, click Apply
    Note: You can edit these style option again later by clicking Annotations Style in the event editor. 
    The Apply button is in the bottom right corner of the Annotation Styler.

Set the time when your annotation will appear

Your annotation will appear on the event timeline. Use the blue arrows or the time fields to set the start and end time for the annotation. 

The start time is when the annotation will appear, and the end time is when it will disappear. 

The Event timeline has a blue highlighted are with handles on each side. Use the handles to adjust the annotation's time.

Add content to your annotation 

We have a simple editor tool to get you started building out content for your annotation. Feel free to add your event content here. 

However, the annotation will display any HTML content you add, which means that with a little bit of simple code in the Source area of your editor you can essentially build out any content you want into your annotation! 

The source button is the top left button in the text editor.

Below we've listed a few best practices to get you thinking strategically, and a few examples to show off the flexibility of what you can do with these annotations. 

Best practices

The golden rule for annotations is this: Every annotation you add must add to a viewer's experience of the video. Because annotations appear inside the player, the reality is that they interrupt both your video and the viewer. This means they have the ability to be very helpful if done right, or to seem spammy if done wrong. If you want to make sure you've done it right, ask yourself honestly: does your annotation add to the video content, or distract from it? You always want it to add to your video content.  

Here are a few more helpful tips to guide you as you plan your annotation:

  • Be careful with hyperlinks - if you're going to navigate away from your video content, make sure you're sure it's worth it. Will they convert right then? Probably worth it. Will they get sidetracked with something else? Don't do it - you worked hard to get them watching your video.
  • If you do add hyperlinks, always make sure links are set to open in a new window so viewers are not sent away from your video. 
  • Make sure your annotations don't cover any very important parts of your video. Keeping them near the borders of the video is always preferable. 
  • Always test your annotations before you publish them:
    • Ensure content displays in the way you designed it to. 
    • Test links to make sure they open properly.
    • Make sure that your viewer has enough time to read any text before the annotation disappears. 
    • Test your color choices to ensure the annotation is visible and any text is readable. 

Ideas to get you started

Link to a landing page 

A blue annotation with a hyperlink that says Learn more about cake.

  1. Highlight the text you want to link and click the link icon
    The link icon is a chain.
     
  2. In the Link options area, select your link type and protocol, then enter your URL. 
    The Link Type and Protocol are dropdown menus, the URL is an empty text field.
  3. Click the Target tab and select New Window if you want this link to open in a new tab. 
    The Target tab is in the hyperlink configuration overlay.
  4. Click OK.

Load another player in the same embed frame

Viewers can watch another Vidyard player in the same spot as the previous player. You can use this to direct viewers to watch extra content while keeping them on the same landing page. 

Two annotations are displayed with links to a new player.

  1. Click Source on your event editor.
    The source button is the top left button in the text editor.
     
  2.  Copy and paste one of the code snippets below into the source area of your event editor. 
  • Link to player from the video thumbnail (as seen in the image above). 
    • Replace <UUID> with the UUID of the player you want to link to. (Learn how to find a player UUID.)
    • In this example, the thumbnail is 150 pixels wide. You can adjust this by altering  150px in the code. 
<a target="_parent" href="//play.vidyard.com/<UUID>.html?v=3.1&autoplay=1"><img width="150px" src="http://play.vidyard.com/<UUID>.jpg" /></a>
  • Link to the video from linked text. 
    • Replace <UUID> with the UUID of the player you want to link to. (Learn how to find a player UUID.)
    • Replace Play this video with the text you want to link to the player. 
<a target="_parent" href="//play.vidyard.com/<UUID>.html?v=3.1&autoplay=1">Play this video!</a>

Button to download a file

You can add a button that will download a file to your annotation. This is is a simple button, but with a bit custom styling you can make it look nice and fancy. 

There is a pink annotation with a button inside that says 'Download Now'

  • Click Source on your event editor.
    The source button is the top left button in the text editor.
     
  • Copy and paste the code snippet below into the source area of your event editor. 
  • Replace File location URL with the URL of the file you want to be downloaded. 
<a download href="File location URL"><input value="Download now" type="button" name="Download now" /></a>

Flexibility of custom code

You can build out anything as simple or complex as you want with the annotation container using the Source code area. You can even use <style> and <script> tags to add custom CSS and Javascript!

For example, here's an example of a collapsible menu that can link to landing pages, PDF's, other Vidyard players - whatever you need.

Here's what the menu will look like collapsed: 

A green rectangular box over a player with the label MENU LABEL

Here's what it looks like expanded: 

A green expanded menu with a darker green label and green menu options with white text.

Below is sample code for the menu in the image above. You can customize the code snippet below for your own purposes if you want - just use the code between the <style> </style> tags to change the CSS styling, and the HTML between the <nav> </nav> tags at the bottom to add in your own links and link text.  Then paste it into your event's Source editor and try it out!

<style type="text/css">html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
                margin: 0;
                padding: 0;
                border: 0;
                font-size: 100%;
                font: inherit;
                vertical-align: baseline
              }
  
              article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }
  
              body { line-height: 1 }
  
              ol, ul { list-style: none }
  
              blockquote, q { quotes: none }
  
              blockquote:before, blockquote:after, q:before, q:after {
                content: '';
                content: none
              }
  
              table {
                border-collapse: collapse;
                border-spacing: 0
              }
  
              body {
                font: 100% "Arial";
              }
  
              a { text-decoration: none; }
  
              /**
               * Hidden fallback
               */
  
  
              /**
               * Styling navigation
               */
  
              header {
                margin-right: auto;
                margin-left: auto;
                max-width: 22.5rem;
                margin-top:150px;
                box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
              }
  
              /**
               * Styling top level items
               */
  
              .nav a, .nav label {
                display: block;
               padding: .85rem;
                color: #fff;
                background-color: #1c992a;
                box-shadow: inset 0 -1px #1c992a;
                -webkit-transition: all .25s ease-in;
                transition: all .25s ease-in;
              }
  
              .nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover {
                color: rgba(255, 255, 255, 0.5);
                background: #26bd44;
              }
  
              .nav label { cursor: pointer; }
  
              /**
               * Styling first level lists items
               */
  
              .group-list a, .group-list label {
                padding-left: 2rem;
                background: #26bd44;
                box-shadow: inset 0 -1px #http://www.colorpicker.com/;
              }
  
              .group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #008f1d; }
  
              /**
               * Styling second level list items
               */
  
              .sub-group-list a, .sub-group-list label {
                padding-left: 4rem;
                background: #353535;
                box-shadow: inset 0 -1px #474747;
              }
  
              .sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: #232323; }
  
              /**
               * Styling third level list items
               */
  
              .sub-sub-group-list a, .sub-sub-group-list label {
                padding-left: 6rem;
                background: #454545;
                box-shadow: inset 0 -1px #575757;
              }
  
              .sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #333333; }
  
              /**
               * Hide nested lists
               */
  
              .group-list, .sub-group-list, .sub-sub-group-list {
                height: 100%;
                max-height: 0;
                overflow: hidden;
                -webkit-transition: max-height .5s ease-in-out;
                transition: max-height .5s ease-in-out;
              }
  
              .nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
              max-height: 1000px; }
  
              /**
               * Rotating chevron icon
               */
  
              label > span {
                float: right;
                -webkit-transition: -webkit-transform .65s ease;
                transition: transform .65s ease;
              }
  
              .nav__list input[type=checkbox]:checked + label > span {
                -webkit-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                transform: rotate(90deg);
              }</style>
              <nav class="nav" role="navigation"><ul class="nav__list"><li><input id="group-1" type="checkbox" hidden="" /> ​​​​​​<label for="group-1">MENU LABEL</label><ul class="group-list"><li><a target="_parent" href="//play.vidyard.com/<UUID>.html?v=3.1&autoplay=1">VIDEO LINK TEXT</a></li><li><a target="_blank" href="WEBSITE URL">URL LABEL</a></li><li><a target="_blank" href="URL TO A FILE(PDF, DOCX ETC)">DOWNLOAD LABEL</a></li></ul></li></ul></nav>

Test your annotation

  1. When you're ready to test your annotation out, toggle the Publish switch to ON, then click Save
    The 'toggle publish ON/OFF' button is to the left of the Save, Cancel, and Delete buttons.
     
  2. Go to your player Share settings, and click Share
  3. Go to the sharing page URL to see your annotations in action!
    The Sharing page URL is found in a player's share tab.
  • Was this article helpful?