Page History
Note | ||
---|---|---|
| ||
In order to be able to play the training video, please make sure to accept recommended settings under the Cookie settings option, at the bottom of the page. |
HTML |
---|
<script> $( document ).ready(function() { // Training Videos Vimeo video IDs var videoIDs = [166945894]; // 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 | ||
---|---|---|
| ||
In order to be able to play the training videos, please make sure to accept recommended settings under the Cookie settings option of the page. 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