JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<div class="player">
  <video autoplay id="video" width="100%" preload="metadata" src="https://player.vimeo.com/progressive_redirect/playback/206557415/rendition/1080p/file.mp4?loc=external&signature=9f66677447e9f134e34882f1726ec1201ef7ccba91bd6e4c4def0a5b6f06bdfc"></video>

  <div class="bar" id="bar"></div>
</div>

CSS

.wrap {
    position: relative;
    max-width: 720px;
    margin: 1rem auto;
  }
  video {
    width: 100%;
    display: block;
  }
  .bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 6px;
    background: linear-gradient(90deg, #3b82f6 var(--p, 0%), #e5e7eb 0);
    border-radius: 999px;
    pointer-events: none;
  }

JavaScript

const v = document.getElementById('video');
  const b = document.getElementById('bar');

  v.addEventListener('timeupdate', () => {
    const percent = (v.currentTime / v.duration) * 100;
    b.style.setProperty('--p', percent + '%');
  });