title: Re-position HTML5 video seekbar
body: <p>I'm trying to create a mock page in HTML that plays a video in full screen in the background. I have a trasparent image that overlays the background video which mimics playing buttons and titles (all buttons are just an image and not real!). </p>
  
  <p>Now I need to insert a <strong>real</strong> seekbar and scrubber to the video tag, with adjustable width and location as shown below. How can I do that?</p>
  
  <p><a href="https://i.stack.imgur.com/jTvrY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jTvrY.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my simple code so far. The static image is <a href="https://i.stack.imgur.com/gmK7P.png" rel="nofollow noreferrer">HERE</a> and the video is <a href="https://www.w3schools.com/html/mov_bbb.mp4" rel="nofollow noreferrer">HERE</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>video#backgroundvid {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-repeat: no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="https://i.stack.imgur.com/gmK7P.png" style="object-fit:cover" alt=""&gt;
  &lt;video preload="auto" autoplay loop id="backgroundvid"&gt;
    &lt;source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"&gt;
    Your browser does not support HTML5 video.
  &lt;/video&gt;</code></pre>
  </div>
  </div>
  </p>