Page History

<script>
  $( document ).ready(function() {
    // Training Videos Vimeo video IDs
    var videoIDs = [166945891];

    // Time box template
    var timeBoxTemplate = function(videoNum, videoID) {
          return '<div class=\"timeBox\" id="video_'+ videoID +'">' +
            '<div class=\"titleHolder\">' +
              '<div class=\"videoNumberHolder\">' +
                '<div class=\"videoNumber\">' + videoNum + '</div>' +
              '</div>' +
              '<div class=\"videoTitle\">' + "" + '</div>' +
            '</div>' +
            '<div class=\"thumbnail\"><img src=""></div>' +
          '</div>';
    };

    for (var i=0; i<videoIDs.length; i++) {
      var timeBox = timeBoxTemplate(i+1, videoIDs[i]); // To start from 1 not from 0
      $(timeBox).appendTo('.timeline');
    }

    // Load first video
    $('.videoScreen iframe').attr('src', 'https://player.vimeo.com/video/' + videoIDs[0]);

    // Get data from vimeo
    $.each(videoIDs, function (i, videoID) {
      $.ajax({
        method: "GET",
        url: "https://api.vimeo.com/videos/" + videoID + '?access_token=0e76ec72e4cc1a5111ac16023a2d0456',
        success: function(data) {

        var timeBox = $('#video_'+videoID);
        timeBox.find('.videoTitle').text(data.name);
        timeBox.find('.thumbnail img').attr('src', data.pictures.sizes[3].link_with_play_button);
        }
      });
    });

    $('.timeBox:first-child').addClass('active');

     // Show current embedded video and set timebox to active
    $('.timeBox').on('click', function() {
      var $this = $(this);
      var index = $this.index();

      $('.timeBox').removeClass('active');
      $this.addClass('active');

      var id = $this.children('.videoID').val();
      $('.videoScreen iframe').attr('src', 'https://player.vimeo.com/video/' + videoIDs[index]);
    });

  });
</script>

<div class="trainingVideosContainer">
  <div class="videosMainHolder">
    <div class="timelineHolder">
      <div class="timeline">

      </div>
    </div>

    <div class="videoHolder">
      <div class="videoScreenHolder">

        <div class="videoScreen">
          <iframe src="" width="640" height="400" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
        </div>

      </div>
    </div>
  </div>
</div>