title: Youtube custom progressbar using YouTube iframe api and jquery not working
body: <p>I want to create a custom youtube progressbar. I made something but it's not working as it should. I want it to run smooth like YouTube's progressbar, to update more frequently not every second like mine and to go from 0 to 100%, now mine stops at 98%. Also I want the preogressbar to stop when the video is paused and to work again when video is playing again.</p>
  
  <p>Progressbar</p>
  
  <pre><code>function progress(percent, $element) {
  var progressBarWidth = percent * $element.width() / 100;
  
  // $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "%&amp;nbsp;");
  
  $element.find('div').animate({ width: progressBarWidth });
  }
  </code></pre>
  
  <p>Progressbar css</p>
  
  <pre><code>#progressBar {
  width: 960px;
  height: 6px;
  background-color: #444444;
  display: none;
  margin-top: 1px;
  }
  
  #progressBar div {
  height: 100%;
  width: 0;
  background-color: #ffffff;
  }
  </code></pre>
  
  <p>YouTube iframe api</p>
  
  <pre><code>// Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
  // Replace the 'ytplayer' element with an &lt;iframe&gt; and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
  player = new YT.Player('ytplayer', {
  height: '540',
  width: '960',
  videoId: 'UDxzMcCrOyI',
  playerVars: { 'showinfo': 0, 'modestbranding': 1, 'rel': 0, 'iv_load_policy': 3 }
  });
  }
  </code></pre>
  
  <p>When I press a button, the video is shown and also the progressbar. Video is playing automatically.</p>
  
  <pre><code>$('#ytplayer').show(0, function() {
  player.playVideo();
  
  $('#progressBar').show();
  
  
  
  
  var playerTotalTime = player.getDuration();
  
  mytimer = setInterval(function() {
  var playerCurrentTime = Math.round(player.getCurrentTime());
  
  var playerTimeDifference = (playerCurrentTime / playerTotalTime) * 100;
  var playerTimePercent = Math.round(playerTimeDifference);
  
  console.log(playerTimePercent);
  
  progress(playerTimePercent, $('#progressBar'));
  }, 1000);
  
  
  
  });
  </code></pre>