title: Custom Progress bar for YouTube Iframe with custom start and end time
body: <p>I am trying to create a custom YouTube Progress bar with different start and end time( other than the default start and duration), reason being I want to display only a part of the video and also the user cannot video the entire original video.
  Website for reference is: <a href="https://tutorialzine.com/2015/08/how-to-control-youtubes-video-player-with-javascript" rel="nofollow noreferrer">https://tutorialzine.com/2015/08/how-to-control-youtubes-video-player-with-javascript</a></p>
  
  <p>I am using this code in an interval of 1 second to update the Progress bar which is a range input.</p>
  
  <pre><code>&lt;input type="range" id="progress-bar" value="0" /&gt;
  
  function updateProgressBar(){
      // Update the value of our progress bar accordingly.
      $('#progress-bar').val((player.getCurrentTime() / Session.get('customEndTime') * 100);
  }
  </code></pre>
  
  <p>However, this does not serve the purpose as it takes the current time from player.getCurrentTime() When I actually want it to start from 0 or extreme left as I want to make it look like it is playing from the starting.</p>
  
  <p>Suppose my start duration in 10 and end duration is 60. How can I display the progress bar so that it gives a percentage and that will increment as my player progress playing.</p>