title: progress bar with upload file video with youtube api
body: <p>I am using youtube api for upload videos from my webpage.</p>
  
  <p>This is my html form:</p>
  
  <pre><code>&lt;form method="post" id="video_form" enctype="multipart/form-data" action="http://uploads.gdata.youtube.com/action/FormDataUpload/key=http://localhost:3000/en/id=4fc3af871d41c808f3000249" accept-charset="UTF-8"&gt;&lt;div style="margin:0;padding:0;display:inline"&gt;&lt;input type="hidden" value="✓" name="utf8"&gt;&lt;input type="hidden" value="key=" name="authenticity_token"&gt;&lt;/div&gt;
          &lt;label for="Select_a_video"&gt;Select a video&lt;/label&gt;
          &lt;input type="file" name="yt_video_id" id="yt_video_id"&gt;
           &lt;div class="actions"&gt;
          &lt;input type="submit" value="Upload video" name="commit" id="submit_video_button" data-disable-with="Upload video" class="btn-large btn-primary"&gt;
           &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I use twitter bootstrap for design and I have this progress bar:</p>
  
  <pre><code>$(document).ready(function(){
  
      var progress = setInterval(function() {
      var $bar = $('.bar');
  
      if ($bar.width()==400) {
          clearInterval(progress);
          $('.progress').removeClass('active');
      } else {
          $bar.width($bar.width()+40);
      }
      $bar.text($bar.width()/4 + "%");
  }, 800);
  
  });​
  </code></pre>
  
  <p>you can see example in <a href="http://jsfiddle.net/xXM2z/68/" rel="nofollow">http://jsfiddle.net/xXM2z/68/</a></p>
  
  <p>My problem is that the progress bar (progress) is not synchronized with the bytes or megabytes that has sent the file.</p>
  
  <p><strong>I want the progress bar is synchronized with the bytes or megabytes that has sent the file and it displays correctly progress...</strong></p>
  
  <p>How can I do it?</p>
  
  <p><strong>Thank you very much</strong></p>