Page History

<script>
  $( document ).ready(function() {

    // Training Videos Vimeo video IDs
    var videoIDs = [303274080, 303274897, 303275744, 303276184, 303276601, 303277172, 303277831];

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

    // 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');

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

    // Get thumbnail images and set them in timebox elements
    $('.timeBox .thumbnail').each(function(n){
      var $this = $(this);
      $.ajax({
        method: "GET",
        url: "https://api.vimeo.com/videos/" + videoIDs[n] + '?access_token=0e76ec72e4cc1a5111ac16023a2d0456',
        success: function(data) {
          var imgElem = $('<img class="video-image" src="' + data["pictures"]["sizes"][3]["link_with_play_button"] + '" />');
          imgElem.appendTo($this);
        }
      });
    });

  });
</script>

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

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

        <div class="timeBox active">
          <div class="titleHolder">
            <div class="videoNumberHolder">
              <div class="videoNumber">1</div>
            </div>
            <div class="videoTitle">Login and Account Settings</div>
          </div>
          <div class="thumbnail"></div>
        </div>

        <div class="timeBox">
          <div class="titleHolder">
            <div class="videoNumberHolder">
              <div class="videoNumber">2</div>
            </div>
            <div class="videoTitle">Recording Settings<Setup</div>
          </div>
          <div class="thumbnail"></div>
        </div>

        <div class="timeBox">
          <div class="titleHolder">
            <div class="videoNumberHolder">
              <div class="videoNumber">3</div>
            </div>
            <div class="videoTitle">Camera Controls</div>
          </div>
          <div class="thumbnail"></div>
        </div>

        <div class="timeBox">
          <div class="titleHolder">
            <div class="videoNumberHolder">
              <div class="videoNumber">4</div>
            </div>
            <div class="videoTitle">Annotating Videos<>Managing the Intercom Function</div>
          </div>
          <div class="thumbnail"></div>
        </div>

        <div class="timeBox">
          <div class="titleHolder">
            <div class="videoNumberHolder">
              <div class="videoNumber">5</div>
            </div>
            <div class="videoTitle">Video>Annotating Review<Videos</div>
          </div>
          <div class="thumbnail"></div>
        </div>

        <div class="timeBox">
          <div class="titleHolder">
            <div class="videoNumberHolder">
              <div class="videoNumber">6</div>
            </div>
            <div class="videoTitle">Managing>Video Review theand IntercomVideo Function<Upload</div>
          </div>
          <div class="thumbnail"></div>
        </div>

        <div class="timeBox">
          <div class="titleHolder">
            <div class="videoNumberHolder">
              <div class="videoNumber">7</div>
            </div>
            <div class="videoTitle">User Management</div>
          </div>
          <div class="thumbnail"></div>
        </div>

      </div>
    </div>

    <div class="videoHolder">
      <div class="videoScreenHolder">
        <div class="videoScreen">
          <iframe<div srcstyle="padding:62.5% 0 0 0;position:relative;" width="640" height="400>
            <iframe src="https://player.vimeo.com/video/303274080" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> mozallowfullscreen allowfullscreen></iframe>
          </div>
          <script src="https://player.vimeo.com/api/player.js"></script>
        </div>
      </div>
    </div>

  </div>
</div>