JSFiddle - React, Tailwind, and code Playground

by siham Yoo

HTML

<div id="progressBar">
  <div></div>
</div>

<iframe id="player" class="player"  width="560" height="315" src="https://www.youtube.com/embed/5Wn85Ge22FQ" frameborder="0" allowfullscreen></iframe>

CSS

#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px;
  /* same as #progressBar height if we want text middle     aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}

JavaScript

function onPlayerReady(e) {
	if(e.player.playVideo()){
		console.log('player is playing');
		progress(20, 20, $('#progressBar'));
   }
}
function onPlayerStateChange(e){
	console.log('player state changed');
}
         
  function progress(timeleft, timetotal, $element) {
  var progressBarWidth = timeleft * $element.width() / timetotal;
  $element.find('div').animate({
    width: progressBarWidth
  }, timeleft == timetotal ? 0 : 1000, 'linear').html(timeleft + " sec&nbsp;");
  if (timeleft > 0) {
    setTimeout(function() {
      progress(timeleft - 1, timetotal, $element);
    }, 1000);
  } else {
    $('#progressBar').replaceWith('<button>Save Me</button>')
  }
};