<script>

var videoIDs = [303274080, 131457581, 303274080, 131457581, 303274080, 131457581, 303274080];

$( document ).ready(function() {
$('.timeBox').each(function(n){
  $.ajax({
    method: "GET",
    url: "https://api.vimeo.com/videos/" + videoIDs[n] + '?access_token=0e76ec72e4cc1a5111ac16023a2d0456',
    success: function(data) {
      var imgElem = $('<img class="video-image" src="' + data["pictures"]["sizes"][4]["link_with_play_button"] + '" />');
      imgElem.appendTo($(this).find('.thumbnail'));
      var titleElem = $('<span class="video-title">' + data["name"] + '</span>')
      titleElem.appendTo($(this).find('.videoTitle'));
    }
  });
});
});
</script>

<div class="trainingVideosContainer">
  <div class="videosMainHolder">
    <div class="timelineHolder">
      <div class="timeline">
        <div class="timeBox active">
          <div class="titleHolder">
            <div class="videoNumberHolder">
              <div class="videoNumber">1</div>
            </div>
            <div class="videoTitle">Login and Account Settings</div>
            <input id="videoID" type="hidden" value="" >
          </div>
          <div class="thumbnail">
          </div>
        </div>
        <div class="timeBox">
          <div class="titleHolder">
            <div class="videoNumberHolder">
              <div class="videoNumber">2</div>
            </div>
            <div class="videoTitle">Recording Setup</div>
          </div>
          <div class="thumbnail">
            
          </div>
        </div>
        <div class="timeBox">
          <div class="titleHolder">
            <div class="videoNumberHolder">
              <div class="videoNumber">3</div>
            </div>
            <div class="videoTitle">Camera Controls</div>
          </div>
          <div class="thumbnail">
            
          </div>
        </div>
        <div class="timeBox">
          <div class="titleHolder">
            <div class="videoNumberHolder">
              <div class="videoNumber">4</div>
            </div>
            <div class="videoTitle">Managing the Intercom Function</div>
          </div>
          <div class="thumbnail">
            
          </div>
        </div>
        <div class="timeBox">
          <div class="titleHolder">
            <div class="videoNumberHolder">
              <div class="videoNumber">5</div>
            </div>
            <div class="videoTitle">Annotating Videos</div>
          </div>
          <div class="thumbnail">
            
          </div>
        </div>
        <div class="timeBox">
          <div class="titleHolder">
            <div class="videoNumberHolder">
              <div class="videoNumber">6</div>
            </div>
            <div class="videoTitle">Video Review and Video Upload</div>
          </div>
          <div class="thumbnail">
            
          </div>
        </div>
        <div class="timeBox">
          <div class="titleHolder">
            <div class="videoNumberHolder">
              <div class="videoNumber">7</div>
            </div>
            <div class="videoTitle">User Management</div>
          </div>
          <div class="thumbnail">
            
          </div>
        </div>
      </div>
    </div>
    <div class="videoHolder">
      <div class="videoScreenHolder">
        <div class="videoScreen">
          <iframe src="https://player.vimeo.com/video/303274080" width="640" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        </div>
      </div>
      <div class="videoText">
        <div class="videoLargeTitle"></div>
        <div class="videoDescription"></div>
      </div>
    </div>
  </div>
</div>