[SOLVED] react-player youtube player swallows keypress events

react-player youtube player swallows keypress events

I'm using react-player to play youtube videos and have a lot of custom hotkeys defined with react-hotkeys-hook. I've got the following config which prevents the default youtube key handlers from running:

const PLAYER_CONFIG: Config = {
  youtube: {
    playerVars: { controls: 0, disablekb: 1, rel: 0 },
  },
}

However with this config (or event with disablekb: 0) the youtube player still swallows all keypress events when it has focus and my custom hotkey handlers don't run. There was a similar issue in the react-player repo back in 2022, closed without resolution.

Is there a way I can get the youtube embedded player to forward these on?

EDIT (things I've tried)

It turns out I can access the internal iFrame in React Player by

<ReactPlayer
    onReady={(player) => {
        console.log(player.getInternalPlayer()['getIframe']())
    }}
    // ...

But attempting to .contentWindow.addEventListener(...) results in a security error:

Uncaught DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.

Related?

I'm beginning to think this might not be possible with the youtube iFrame API.

How to add keydown event on iframe while playing youtube video?

Solution

There doesn't currently appear to be a workaround for this, the youtube iFrame swallows keypress events and most video players simple wrap the youtube API.

As a workaround I've positioned a transparent div over the top of the youtube player and added onClick handlers on it to mock the youtube mouse events.

Its not perfect as this means there are things like related videos that appear to be clickable but aren't, but at least the player can be contorolled with key combinations.