How to detect keyboard input over a full-screen iframe (example with Twitch)

Other Questions Twitch
1

I’m currently trying to implement a feature where I need to capture keypresses when a Twitch embed is displayed in full screen on my website. Unfortunately, it seems like I can’t get those keypresses because the iframe takes control of the input.

It’s important to mention that I don’t want to modify anything within the Twitch embed or change its functionality. My goal is simply to listen for the keyboard events on my own site when a visitor is typing, regardless of whether the iframe is focused.

Here is the code I’ve attempted so far:

$('body iframe').on('load', function() {
    $(document.getElementById('twitchiframe').contentWindow.document).keydown(function(e) {
        alert('Key pressed!');
    });
});

However, I keep encountering this error:

Error: Permission denied to access property “document”

I’ve gone through countless Stack Overflow posts looking for a solution but haven’t had any luck. If anyone has insight or suggestions, I would greatly appreciate your help!

2

Cross-origin security is blocking you, but I found a workaround while building a media platform. Don’t try to penetrate the iframe directly. Set up a capture phase event listener on the document level - use addEventListener with capture set to true. This grabs events during capture phase before they bubble down to the iframe. Pair this with intersection observer API to detect when the iframe’s actually visible. Timing matters here - bind these listeners right when the page loads, not after the iframe loads. Also watch document.activeElement changes with your keydown handlers. When activeElement becomes the iframe, you know focus shifted there. This respects security boundaries but still gives you useful interaction data for analytics.

3

I’ve been fighting this same issue for months on a project with multiple streaming platforms embedded. You can’t access the iframe’s document directly because of security sandboxing, but I found something useful about event bubbling. You can’t penetrate the iframe boundary, but you can catch certain events at the document level before the iframe consumes them. Attach your keydown listeners to the document root instead of trying to get inside the iframe. I’d also try a combo approach - monitor document.hasFocus() and track mouse coordinates. When the mouse enters the iframe area and your document loses focus, the user’s probably interacting with the embed. This indirect method gives me about 85% accuracy for detecting user engagement without breaking cross-origin policies.

4

Yeah, classic cross-origin pain. Hit this same wall with another streamin service last year. I ended up usin a keylogger on the parent window - just capture keystrokes before they hit the iframe. Not perfect but does the job for basic trackin.

5

Nope, can’t be done because of browser security restrictions. You’re hitting the Same-Origin Policy - browsers block scripts from accessing content in cross-origin iframes. Since Twitch embeds load from a different domain, you can’t touch their internal document or events.

I hit this same wall building a gaming portal that needed to track user interactions in embedded content. Your best bet is the postMessage API, but that needs cooperation from the iframe content (which you said you can’t modify).

Another hack: detect focus changes on your main window. When users click into the iframe, your window loses focus. You can catch this with blur/focus events on the window object. Won’t catch individual keypresses, but it’ll tell you when users are actively engaging with the embed.

6

You are encountering cross-origin restrictions, which prevent direct DOM access to the iframe’s content. I faced a similar issue with YouTube embeds and had to think outside the box. One solution that worked for me was placing a transparent overlay div above the iframe to capture the keyboard events before they reach the embed. Ensure to manage the visibility of the overlay; hide it on mouseenter so that users can interact with Twitch, and show it again as needed. Another approach is to use the Page Visibility API to track when your page loses focus and combine that with mouse position data. While this isn’t foolproof, it helps in determining when users are focusing on the embed versus your main content.

7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.