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>