JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.youtube.com/iframe_api"></script>
<h4>Be sure to click into the fiddle "Result" area so that the key events are triggered (if you are not focused on the fiddle "Result" area or if you click into the youtube iframe -  the key events won't be listened to).</h4></br>

<div id="video"></div>

JavaScript

function embedYouTubeVideo() {
    player = new YT.Player('video', {
        videoId: 'M7lc1UVf-VE',
        playerVars: {'autoplay': 1}
    });
}

function rewind() {
    var currentTime = player.getCurrentTime();
    player.seekTo(currentTime - 30, true);
    player.playVideo();
}

function fastforward() {
    var currentTime = player.getCurrentTime();
    player.seekTo(currentTime + 30, true);
    player.playVideo();  

}

$(function(){
    
    // embed the video
    embedYouTubeVideo();
    
    // bind events to the arrow keys
    $(document).keydown(function(e) {
        switch(e.which) {
                
            case 37: // left (rewind)
                rewind();
            break;
                
            case 39: // right
                fastforward();
            break;
    
            default: return; // exit this handler for other keys
        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    });
});