Page History
...
HTML |
---|
<script> $( document ).ready(function() { // Training Videos Vimeo video IDs var videoIDs = [166945893]; // 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> |
Note |
---|
If you do not see the videos, go to Cookies Settings at the bottom of the page and allow all Cookies. For more details, click here. |
Overview
Content Tools