scroll-yt-video.js

 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', {
     height: '390',
     width: '640',
     videoId: `${videoId}`,
     host: `${window.location.protocol}` + '//www.youtube.com',
     enablejsapi: 1,
     playerVars: {
       
       rel: 0, 
       origin: window.location,
     },
     showinfo: 0,
     events: {
       'onReady': onPlayerReady,
       'onStateChange': onPlayerStateChange
     }
   });
 }
 
 function onPlayerReady(event) {
  
 }
 
 function onPlayerStateChange(event) {
 }

 
 function toSeconds(hhmmss) {
     const [hh, mm, ss] = hhmmss.split(':');
     return (parseFloat(hh) * 60 + parseFloat(mm)) * 60 + parseFloat(ss);
 }
 
 {
     for (const span of document.getElementsByClassName('s2')) {
         const begin = span.getAttribute('begin');
         span.addEventListener('click', (e) => {
             const when = toSeconds(begin);
             player.seekTo(when,  true);
         });
     }
 }

function playOrPause() {
    if (player.getPlayerState() ==   1) {
        player.pauseVideo();
    } else {
        player.playVideo();
    }
}

function changePlaybackRate(offset) {
    console.log(`Changing playback rate by ${offset}`);
    const rates = player.getAvailablePlaybackRates();
    const curRateIndex = rates.indexOf(player.getPlaybackRate());
    const newRate = rates[curRateIndex + offset];
    console.log(`Setting rate to ${newRate}`);
    player.setPlaybackRate(newRate);
}


document.addEventListener('keydown', function(event) {
    console.log(`Got keydown with key ${event.key} code ${event.keyCode}`);
    switch (event.key) {
        case ' ':
            playOrPause();
            event.preventDefault();
            break;
        case 'ArrowLeft':
            player.seekTo(player.getCurrentTime() - 3);
            break;
        case 'ArrowRight':
            player.seekTo(player.getCurrentTime() + 3);
            break;
        case '>':
            changePlaybackRate(1);
            break;
        case '<':
            changePlaybackRate(-1);
            break;
        default:
            console.log(`Not handling key ${event.key}`);
    }
});

The relevant part of the rest of the HTML document / DOM (corresponding to the above) looks like:

<span begin="00:00:22.480" end="00:00:31.240" class="s2">on this particular system.
    This is</span>
<span begin="00:00:29.010" end="00:00:34.629" class="s2">something I'll probably do only once in</span>
<span begin="00:00:31.240" end="00:00:36.190" class="s2">my life, because I don’t know if I’ll</span>
<span begin="00:00:34.629" end="00:00:40.210" class="s2">understand the system as well as I do</span>
<span begin="00:00:36.190" end="00:00:41.739" class="s2">now at any other time in my life.

    And I</span>
<span begin="00:00:40.210" end="00:00:43.420" class="s2">think it’s an exciting time for the</span>

and so on.