JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>
  <div id="video-placeholder"></div>
  <div id="controls">
    <ul>
      <li>
        <p><span id="current-time">0:00</span> / <span id="duration">0:00</span>
        </p>
      </li>

      <li>
        <div class="progress">
          <div class="progress">
            <div id="progress-bar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
              <span class="sr-only">70% Complete</span>
            </div>
          </div>
        </div>
      </li>

      <li>
        <i id="play" class="material-icons">play_arrow</i>
      </li>

      <li>
        <i id="pause" class="material-icons">pause</i>
      </li>

    </ul>

  </div>

JavaScript

jQuery(document).ready(function () {
var player,
  time_update_interval = 0;
  
  (function onYouTubeIframeAPIReady() {
  player = new YT.Player('video-placeholder', {
    width: 600,
    height: 400,
    videoId: '6BGv7-drumU',
    playerVars: {
      color: 'white'
    },
    events: {
      onReady: initialize
    }
  });
})();

function initialize() {

  // Update the controls on load
  updateTimerDisplay();
  updateProgressBar();

  // Clear any old interval.
  clearInterval(time_update_interval);

  // Start interval to update elapsed time display and
  // the elapsed part of the progress bar every second.
  time_update_interval = setInterval(function() {
    updateTimerDisplay();
    updateProgressBar();
  }, 100);


  $('#volume-input').val(Math.round(player.getVolume()));
}


// This function is called by initialize()
function updateTimerDisplay() {
	if((player.getPlayerState() == 5)
			|| (player.getPlayerState() == -1)) {
  	let total = moment.utc(player.getDuration() * 1000);
    $('#duration').text(total.format('mm:ss'));
  }
  if(player.getPlayerState() == 1) {
		let minutos = moment.utc(player.getCurrentTime() * 1000);
    
    $('#current-time').text(minutos.format('mm:ss'));
	}
}


// This function is called by initialize()
function updateProgressBar() {
	if(player.getPlayerState() == 1) {
  	let duracao = player.getDuration();
    let atual = player.getCurrentTime();
    atual = parseFloat(atual.toFixed(6));
    let porcentagem = (atual * 100) / duracao;
  	$('#progress-bar').css("width", porcentagem + "%").attr("aria-valuenow", porcentagem)
  }
}

// Playback

$('#play').on('click', function() {
  player.playVideo();
});


$('#pause').on('click', function() {
  player.pauseVideo();
});


// Sound volume


$('#mute-toggle').on('click', function() {
  var mute_toggle = $(this);

  if (player.isMuted()) {
    player.unMute();
    mute_toggle.text('volume_up');
  } else {
    player.mute();
    mute_toggle.text('volume_off');
  }
});


// Other...