JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.youtube.com/iframe_api"></script>
<iframe id="player" src="https://www.youtube.com/embed/DjB1OvEYMhY?enablejsapi=1"></iframe>
<p id="display"></p>

CSS

h5,p{
    margin:0px;
}

JavaScript

var player, timer, timeSpent = [], display = document.getElementById('display');

function onYouTubeIframeAPIReady() {
	player = new YT.Player( 'player', {
		events: { 'onStateChange': onPlayerStateChange }
	});
}

function onPlayerStateChange(event) {
	if(event.data === 1) { // Started playing
        if(!timeSpent.length){
            for(var i=0, l=parseInt(player.getDuration()); i<l; i++) timeSpent.push(false);
        }
	    timer = setInterval(record,100);
    } else {
		clearInterval(timer);
	}
}

function record(){
	timeSpent[ parseInt(player.getCurrentTime()) ] = true;
	showPercentage();
}

function showPercentage(){
    var percent = 0;
    for(var i=0, l=timeSpent.length; i<l; i++){
        if(timeSpent[i]) percent++;
    }
    percent = Math.round(percent / timeSpent.length * 100);
    display.innerHTML = percent + "%";
}