Page History

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