Page History

  $( document ).ready(function()

{
    

/

/

Training 

Videos 

Vimeo video IDs
    var 

videoIDs = 

[303274080, 303274897, 303275744, 303276184, 303276601, 303277172, 303277831];

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