How do I create an invisible annotation that jumps to a time in the video?

Overview

Annotations within Events have full HTML/CSS/JS capability. By using the Player API, it's possible to program annotations that control the player . In this case, transparent boxes can be used on top of text in the video to skip to defined timecodes. 

This is a great tool when you have a video agenda/contents frame that can be used to navigate. See the example video below

Steps

1. Hover over the player and select Events.
2. Click Add Event.
3. Click Annotation and hit Add Event.
4. Set the Background Transparency to 100% and click Apply.
5. Erase the content.
6. Click HTML and replace the code with the code below.
   Note: Remember to change the highlighted seconds below to your desired timecode.
7. Match the highlighted height & width inside the code to the Width & Height of your annotation (Image below) to avoid scrollbars inside the annotation.
8. Assign and set the Annotation time on the desired video.
9. Preview to ensure that the box lines up to the text area.
10. Click Save.

<script type='text/javascript' src="//play.vidyard.com/v0/api.js"></script>
<style type="text/css">/* Quick reset to ensure the Annotation area is full height/width and no default padding*/
  html,body{
  height:100%;
  width: 100%;
  margin: 0 auto;
  padding:0;
  }

  .website-link{
  height: 57px; /* Annotation Height */
  width: 306px; /* Annotation Width */
  }

  .website-link a{
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  }</style><script type="text/javascript">
 function jumpToVideo(second) {
  var ctaId = window.frameElement.id.split('_')[1];
  var playerId = window.frameElement.src.split('/');
  playerId = playerId[playerId.length-3];
  var playerData = {uuid: playerId, event: 'seek', position: second};
  window.parent.postMessage(JSON.stringify(playerData), '*');
  }
</script><div class="website-link"><a onclick="jumpToVideo(33)"></a></div>