JSFiddle - React, Tailwind, and code Playground

by siham Yoo

HTML

<div id="progressBar">
  <div></div>
</div>
   <iframe id="player" class="player" src="https://www.youtube.com/embed/5Wn85Ge22FQ?&enablejsapi=1&autoplay=0&showinfo=0&controls=0&rel=0" 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 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>')
  }
};


var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
    });
}
      
    function onPlayerReady(event) {
        if(event.target.playVideo())
                progress(20, 20, $('#progressBar'));
      }