HTML chapter markers for a Vimeo video

The following pen is a commented demo of how to simplify Vimeo's Froogaloop API for quick creation of chapter markers in a project. In this pen we capture a chapter marker on click, pass it to an external JS file, then control the on-page video through the provided API. The follow up pen will deal with live transcriptions. I'll restore the original Steampunk video in a bit - I made a mistake and edited a live pen. The functionality is still intact.

jQuery(function ($) { // Document Ready (important!)
  // Get the video element that we wish to control
  var iframe = document.getElementById('thevideo');
  // Initialize Froogaloop (linked .js.min file) on the captured video
  var player = $f(iframe);

  // When a link with a class of "timecode" is clicked, capture the event
  $('.timecode').on('click', function (e) {
    // Prevent the default link (typically a hash) from executing
    // Get the location value from the HTML5 data parameter
    var seekVal = $(this).attr('data-seek');
    // Using Froogaloop, trigger the SeekTo method using the captured value
    player.api('seekTo', seekVal);

@import "compass/css3";

 * The SCSS stuff isn't really part of the tutorial, although using definition lists to line up your time stamp and description for SEO is a trick I'd recommend learning.

@import url(,400|Playfair+Display:400,700);

html, body { // useful to define these in many cases
  height: 100%;
  width: 100%;

body { // Just fixing a background in place to make the view interesting
  background: url( center center;
  background-attachment: fixed;
  background-size: cover;
  padding-top: 5%;

header, footer { // Some quick styles so your eyes don't bleed
  background: rgb(36, 38, 39);
  padding: 15px;
  h1 {
    font-family: 'Playfair Display', serif;
    color: silver;
    font-size: 32px;
  p {
    font-family: 'Dosis', sans-serif;
    font-size: 1.1em;
    text-align: justify;
    color: silver;

.main-content {
  background: rgba(0,0,0,.85);
  padding: 10px;
  .toc { // This styles our defintion list so the timecode & name are related
    dt, dd {
      float: left;
      margin: 0;
      color: white;
      font-size: 12px
    dt { 
      margin-right: 1em;

footer { // Nothing to see here, move along
  text-align: right;