title: HTML5 Video Progress bar in fullscreen not stretching
body: <p>I've made custom video controls but when the video is playing my progress bar does not stretch accordingly in fullScreen. So by the time the video reaches the end the bar is about 1/3 of the width.</p>
  
  <p>I believe it has something to do with the barSize being set equal to the size of the container before fullScreen. The bar size is set at percentage so it adjusts to the wrapper. I don't know how to make the progress bar adjust to the containing bar using JS. (can't use JQuery)</p>
  
  <p>JS:</p>
  
  <pre><code> bar = document.getElementById('defaultBar');
          barSize = bar.offsetWidth;
          progress = document.getElementById('progressBar');
  
  function move(e){
      if(!media.paused &amp;&amp; !media.ended){
          var mouseX= e.offsetX;
          newTime=((mouseX*media.duration)/barSize);
          media.currentTime=newTime;
          progress.style.width=mouseX+'px';
      }
  } 
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="defaultBar"&gt;
       &lt;div id="progressBar"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#defaultBar{
  position:relative;
  float:left;
  width:59.5%;
  height: 22px;
  padding:0px;
  border: 0px solid black;
  background:yellow;
  margin: 0px;
  cursor: pointer;
  }
  
  #progressBar{
  position:relative;
  float:left;
  height: 50%;
  margin: 5px 0px;
  border: 0px solid black;
  background:green;
  cursor: pointer;
  }
  </code></pre>
  
  <p>Not fullScreen you can see how progress bar is almost at the end of the container (yellow):
  <img src="https://i.stack.imgur.com/HoSZe.png" alt="enter image description here"></p>
  
  <p>Same position within the video, the progress bar is no where near the end of the container:
  <img src="https://i.stack.imgur.com/xJa2m.jpg" alt="enter image description here"></p>