JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ejb.github.io/progressor.js/progressor.js"></script>
<div class="container">
<video preload="auto" src="http://ejb.github.io/progressor.js/demos/physics.mp4" > </video>
<div id="progressbar"></div>
</div>

<br>

<button onClick="document.getElementsByTagName('video')[0].play();">play</button>
<button onClick="document.getElementsByTagName('video')[0].pause();">pause</button>


<p>Video is a CC-licensed <a href="http://en.wikipedia.org/wiki/File:Physicsworks.ogg">presentation by Walter Lewin</a>.</p>

CSS

video, .container {
    width: 300px;
    display: inline-block;
}

.progressor {
  width: 300px;
  height: 5px;
  background: #58AFDB;
    margin-top: -5px;
    transition: height, 0.2s;
}

.container:hover .progressor {
height: 15px;
        margin-top: -15px;
}

.progressor-progress {
  background: #3482b1;
}

JavaScript

var p = new Progressor({
    media : document.getElementsByTagName('video')[0],
    bar : document.getElementById('progressbar')
});