Overview

You may be in a situation where you have a player with multiple videos in it. It would be beneficial for the viewing experience to offer a functionality which allows the viewer to engage with what's relevant to them next without using the playlist navigation. 

Below is a block of sample code and instructions on how to implement it. You can also find a similar implementation of this method (with slightly different code) to create a navigation bar using timestamps. 

Result

Steps

1. Click the Events Tab on the player.
2. Select Add Event. 
3. Click Annotation, then Add Event, then Apply.
4. Click Source and replace the code with the code below.
5. Configure the section onclick="jumpToVideo(0)" to the desired timestamp
6. Note: The number onclick="jumpToVideo(0)" is in Seconds. (For example, for 1:30: onclick="jumpToVideo(90)) 
7. Configure the header you would like to associate the timestamp to
   <a onclick="jumpToVideo(0)">[HEADER NAME]</a>
8. If you wish to add another checkpoint Copy and Paste the code below after the end of the list tag (</li>) and edit the changes as needed:
   <li><a onclick="jumpToVideo(0)">[HEADER NAME]</a></li>
9. Once you are done editing the code click Annotation Style.
10. Set the Background Transparency to 100%.
11. Click and hold the Navigation Bar annotation and move it to the desired location.
12. Important - Click and drag the size of the Navigation bar to the bottom of the video in Event Builder (Refer to 1:34 on the Walkthrough Video in the navigation bar article).
13. Click Apply.
14. Set the annotation time to as long as you desire it to show on the video.
15. Set Published to ON.
16. Save.

Code:

<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;
text-align: center;
}

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% "roboto", "Trebuchet MS", sans-serif;
}

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: .55rem;
color: #fff;
background-color: #7DC577;
box-shadow: inset 0 -1px #66ba5e;
-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: #55b34d;
}

.nav label { cursor: pointer; }

/**
* Styling first level lists items
*/

.group-list a, .group-list label {
padding-left: 1rem;
background: #88c982;
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: #aad9a6; }

/**
* 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>

<script type="text/javascript">
function jumpToVideo(chapter_index) {
API.closeCta({ disablePlay: true });
API.playChapter({ chapter_index: chapter_index });
}
</script>

<!-- Number in brackets after jumptoVideo is chapter number, 0 is first chapter.-->

<nav class="nav" role="navigation"><ul class="nav__list">
<li><input id="group-1" type="checkbox" hidden="" /> <label for="group-1"> Navigate </label>
<ul class="group-list"><li>
<a onclick="jumpToVideo(0)"> First Video </a></li><li>
<a onclick="jumpToVideo(1)"> Second Video </a></li>
</ul></li></ul></nav>

*edit the jumpToVideo(0) -- '0' to match the index of the chapter you would like to navigate to. Ex. Video / Chap #2 = index '1'