JSFiddle - React, Tailwind, and code Playground

JavaScript

$.getScript('https://www.youtube.com/iframe_api');

var ytPlayer;
function onYouTubeIframeAPIReady() {
	$(function() { //dom needs to be ready to create youtube player
		ytPlayer = new YT.Player('ytPlayer', {
			events: {
				'onReady': onPlayerReady
				//'onStateChange': updateYTSeekBar
			}
		});
	});
}

function onPlayerReady(){
	//temporary fix for youtube onStateChange not firing
	ytPlayer.addEventListener('onStateChange', updateYTSeekBar);
}

var t;
function updateYTSeekBar(){
	var ytState;
	if(playedBar && bufferdBar){
		var bufferd = ytPlayer.getVideoLoadedFraction()*100;
		if(bufferd > 100) bufferd = 100; //for some reason it gets greater than 100
		bufferdBar.width(bufferd +'%');
		
        var percent = ytPlayer.getCurrentTime() / ytPlayer.getDuration() * 100;
		playedBar.width(percent+'%');
        
		ytState = ytPlayer.getPlayerState();        
		if(ytState > 0 && ytState < 3){
			t = window.setTimeout(updateYTSeekBar,200);
		}
	}

}