Demo

HTML

<div id="cuezones_demo">
  <div class="container">
    <div class="background">
      <img class="bg ch0" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch0.jpg" />
      <img class="bg ch1" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch1.jpg" />
      <img class="bg ch2" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch2.jpg" />
      <img class="bg ch3" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch3.jpg" />
      <img class="bg ch4" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch4.jpg" />
      <img class="bg ch5" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch5.jpg" />
      <img class="bg ch6" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch6.jpg" />
      <img class="bg ch7" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch7.jpg" />
      <img class="bg ch8" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch8.jpg" />
      <img class="bg ch9" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch9.jpg" />
      <img class="bg ch10" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch10.jpg" />
      <img class="bg ch11" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch11.jpg" />
      <img class="bg ch12" alt="" src="http://media.sublimevideo.net/misc/cuezones_demo/ch12.jpg" />
    </div>
    <div id="title"></div>
    <div class="player">
      <video id="video1" data-settings="uid:demo-cue-zones-chapters-menu; player-kit:3; initial-overlay-enable:false; fullmode-enable:false;" title="Demo: Cue Zones, Chapters menu" width="400" height="225" preload="none" poster="http://media.sublimevideo.net/vpa/ms_800.jpg">
        <source src="http://media.sublimevideo.net/vpa/ms_360p.mp4" />
        <source src="http://media.sublimevideo.net/vpa/ms_360p.webm" />
      </video>
    </div>
    <ul id="chapters"></ul>
  </div>
</div>

JavaScript

sublime.ready(function() {

  // Every zone here ends when the next one begins, so in
  // this case we don"t need to specify the "to:" value.
  var cuezones = [{
    id: "ch1",
    from: 0,
    text: "Lava"
  }, {
    id: "ch2",
    from: 13.95,
    text: "Icebergs in Jökulsárlón"
  }, {
    id: "ch3",
    from: 19,
    text: "Plane wreck"
  }, {
    id: "ch4",
    from: 22.8,
    text: "Budir Church"
  }, {
    id: "ch5",
    from: 28.2,
    text: "Lupin field"
  }, {
    id: "ch6",
    from: 34.15,
    text: "Landmannalaugar"
  }, {
    id: "ch7",
    from: 38.15,
    text: "Lava field"
  }, {
    id: "ch8",
    from: 44.3,
    text: "Dyrhólaey Beach"
  }, {
    id: "ch9",
    from: 51.8,
    text: "West Fjords"
  }, {
    id: "ch10",
    from: 59.5,
    text: "Dyrhólaey Beach"
  }, {
    id: "ch11",
    from: 64.55,
    text: "Landmannalaugar"
  }, {
    id: "ch12",
    from: 69.4,
    text: "Hverfjall Crater"
  }];

  // Show default background image (the one displayed at the beginning, when the video is still stopped)
  $(".bg.ch0").fadeIn();

  // Build the chapters menu (hidden)
  $.each(cuezones, function(index, zone) {
    $("#chapters").append("<li id=\"" + zone.id + "\"><a href=\"#\"><img width=\"60\" alt=\"\" src=\"http://media.sublimevideo.net/misc/cuezones_demo/" + zone.id + ".jpg\" /></a></li>").hide();
  });

  // Set up the chapters menu
  $("#chapters li").click(function(event) {
    event.preventDefault();
    sublime("video1").cuezones.goTo("places." + this.id);
  });

  // Cue Zones set up
  sublime.prepare("video1", function(player) {
    player.on("start", function() {
      // Show the chapters menu when video is started
      $("#chapters").show();
    });

    player.cuezones.addGroup({
      id: "places",
      cuezones: cuezones,
      onenter: function(player, groupId, cuezone, index) {
        $("img.bg." + cuezone.id).fadeIn("slow");
        $("#title").html(cuezone.text);
        $("#" + cuezone.id).addClass("active");
      },
      onexit: function(player, groupId, cuezone, index) {
        $("img.bg." + cuezone.id).fadeOut("slow");
        $("#" + cuezone.id).removeClass("active");
      }
    });
  });
});

// Adjust background img ratio
$(document).ready(function(){
  fixBackgroundImageSize();
});
$(window).resize(function(){
  fixBackgroundImageSize();
});

function fixBackgroundImageSize() {
  var container = $("#cuezones_demo");
  var background = $("#cuezones_demo .background");
  if (container.width()/container.height() < 16/9) {
    background.addClass("tall");
  } else {
    background.removeClass("tall");
  }
}

CSS

#cuezones_demo .container {
  width:100%;
  height:440px;
  overflow:hidden;
  position:relative;
  background-color:#000;
}

#cuezones_demo .background {
  opacity:0.8;
  -moz-opacity:0.8;
  filter:alpha(opacity=80);
}

#cuezones_demo img.bg {
  width:100%;
  height:auto;
  position: absolute;
  top:0;
  left:0;
  display:none;
}

#cuezones_demo .background.tall img.bg {
  width:auto;
  height:100%;
}


#title {
  font-family:Georgia, Times, serif;
  font-size:22px;
  font-style:italic;
  text-align:center;
  color:#fff;
  text-shadow:rgba(0,0,0,0.6) 0 1px 5px;
  position:absolute;
  top:25px;
  left:0;
  width:100%;
}

#cuezones_demo .player {
  position:relative;
  width:400px;
  height:225px;
  margin:70px auto 0;
  -webkit-box-shadow: rgba(0,0,0,0.7) 0px 2px 30px;
     -moz-box-shadow: rgba(0,0,0,0.7) 0px 2px 30px;
          box-shadow: rgba(0,0,0,0.7) 0px 2px 30px;
}

#chapters {
  list-style-type:none;
  position:absolute;
  top:320px;
  left:0;
  right:0;
  margin:0 auto;
  padding:0;
  width:400px;
  z-index:2;
}

#chapters li {
  float:left;
  margin:0 8px 8px 0;
}

#chapters li:nth-child(6n) {
  margin-right:0;
}

#chapters li a {
  outline:0;
}

#chapters li img {
  border:2px solid rgba(255,255,255,0.2);
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
  -webkit-box-shadow: rgba(0,0,0,0.7) 0px 1px 10px;
     -moz-box-shadow: rgba(0,0,0,0.7) 0px 1px 10px;
          box-shadow: rgba(0,0,0,0.7) 0px 1px 10px;
}

#chapters li.active img {
  border-color:rgba(255,255,255,1);
}