I have a chrome extension that works as a video overlay to allow for specific timestamp playback.

The extension is activated via keyboard command, and uses a form to input specific time stamps. The problem is: with video.js video elements, number hotkeys are used as inputs to jump the video to select points.

My overlay uses a form, which also requires number inputs. So instead of numbers being entered into the form, the keydown input is used by the video on the page to skip to pre-determined percentages of the overall video time.

Here’s what I know:

1. The video player is nested within an iframe (“#player”).
2. The element has an event listener on keydown coming directly from the video.js library file.
3. When I remove the event listener via the console, the overlay works exactly as expected.

I have tried a number of things, but believe the fact that the video is nested within the iframe stops the typical methods from working.

• I have tried adding an event listener for the element on keydown with a function that includes event.stopPropogation() and event.preventDefault(). This, however, completely cancels all keydown events relating to the video, preventing me from opening the overlay as well.
• If I, on second key command, try removing the event listener I’ve placed, the video is not affected at all and functions as usual: allowing me to open the overlay but preventing me from inputting numbers. As though the first key command does not place my event listener, and only on the second key input does it actually place the event listener.
• I’ve tried accessing the element within the iframe via my content.js file using the contentDocument and contentWindow methods, but this function occurs within the content.js file of my chrome extension which does not have those set of permissions and inevitably requires CORS methods to function. That is something I would want to avoid, as to not overcomplicate compatibility.
• I’ve also tried hijacking the focus from the video to my overlay, either on key command or once the extension is loaded, neither of which work.

Here is the main point in which I want to disable the video.js event listener, within the keydown method.

  function handleKeydown(event) {
    const isCtrlKey = OSName === "Mac/iOS" ? event.metaKey : event.ctrlKey;
    const isAltKey = OSName === "Mac/iOS" ? event.ctrlKey : event.altKey;

    if (isCtrlKey && isAltKey) {
      if (
        window.location.href.includes("watch") ||
        window.location.href.includes("open") ||
        window.location.href.includes("redbarradio")
      ) {
        // document.activeElement.blur()
        // console.log(document.activeElement)

        overlayVisibleBool.value = !overlayVisibleBool.value;

        const overlayDiv = document.getElementById("rr_overlay");

        if (!overlayDiv) {
          appendOverlay();
          appendListeners();
          appendTippy();
        }

        if (!spotifyOverlayBackground) {
          spotifyOverlayBackground = true;
        }

        toggleOverlay();
        document.getElementById("timeInput").value = "";

        let cancelIt = (event) => {
          event.preventDefault()
          event.stopPropagation()
        }

        let player = document.getElementById("player")
        console.log(player)
        console.log("overlayBool: ", overlayVisibleBool.value)
        // if (overlayVisibleBool.value) {
        //   player.addEventListener("keydown", cancelIt, true)
        //   console.log("Keydown cancelled.")
        // } 
        // else {
        //   player.removeEventListener("keydown", cancelIt, true)
        //   console.log("Keydown enabled.")
        // }
      }
    }
  }

  document.addEventListener("keydown", handleKeydown);

Given that the blank overlay already works to set the video to the inherent time stamp (00:00), and that removing the exact event listener from the “#player” element clears the number input issue, I can’t help but feel I’m missing something very simple with the existing method I’m using.

This is the example video.js site I am using, and here is the complete code for the current version of the chrome extension. Additionally, here is the current version of the chrome extension in the store. Thank you in advance, and no recommendation is too small.

Edit: I’ve narrowed the specific library feature this is due to. The “hotkeys” library within video.js captures the number inputs when the video element is selected, and overrides all other inputs. This event listener is applied to the first iframe’s document element on the site, which is where the video is located.