Handle key events when using Youtube iframe API

Question

I was looking for a solution on how to handle key events when running Youtube videos on my application using Youtube iframe API. unfortunately couldn't find any. Did went through this documentation https://developers.google.com/youtube/iframe_api_reference#Events but it seems player doesn't fire any event related to key ( ex: onkeydown, keypress, keyup ).

I tried adding events directly to the provided code but it didnt worked.

 var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('trailer_video', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            // 'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
            'onkeydown': myfunction    // custom event 
          }
        });
      }

Is there any way I can handle key events specially when Arrow keys are pressed ?.

P.S: I dont know I might be wrong here but usually when i press Arrow keys while video is buffering, i see chain of dots moving which gives me a hint, that the player does detects these events and responds.

UPDATE QUESTION

As answer below suggests which is ofcourse a solution in a way but since Youtube also handles left and right arrow key events its possible to use when cursor is over the video as well, My concern is, how can i handle the events for up and down arrow key which are not getting handled by Youtube and which only works when cursor is not over the video if I implement a custom event handler.

Answer 1

It depends on what you are trying to accomplish. But the answer to your question, "Is there any way I can handle key events specially when Arrow keys are pressed?" is yes. Here is an example of a custom rewind/fast-forward functionality that uses the left and right arrow keys:

https://jsfiddle.net/xoewzhcy/3/

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

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

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 (fast-forward)
                fastforward();
            break;
            default: return; // exit this handler for other keys
        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    });
});

NOTE: Watch out for when you're focused on the embedded video (i.e., you click the YouTube play button or click into the YouTube iframe in any way). Because, your key events won't be listened to since the YouTube iframe is a completely separate window. To get around this, you could overlay a transparent div on the YouTube iframe and build your own play/pause buttons. That way no one can ever click into the iframe and lose focus of the parent window.

I hope this helps!