How to detect escape key pressed when in a Youtube video?

Question

An odd question this will be, but here goes. I have a page on which I show a photo in a large format, like a lightbox. When pressing ESC I close the page and return the user to the page where he came from, which shows the photos in a normal format:

$(document).keyup(function(e) {
 if (e.keyCode == 27) {
    var closeURL = $('.close').attr('href');
        window.location = closeURL;
 }
});

However, on the same lightbox page is also a side panel that may contain embedded Youtube videos. It is possible for users to enlarge that video to fullscreen by using the standard video controls of the Youtube player. If the user hits ESC in that scenario, it will close the fullscreen video and return to the lightbox page (standard embedded player behavior, which is what I want), however, the ESC key event then also triggers my keyup code which closes the Lightbox, undesirable in this specific scenario.

I've found this trickling down to be there in Chrome, but not in Firefox. Essentially what I want is for my ESC code to not be triggered when hitting ESC to close the Youtube player, yet for it to trigger only when users hit ESC as they watch the photo (and not the video).

I was looking into event.target to distinguish between these scenarios but no luck yet. Any ideas?

Update: I'm going to accept this Chrome-only bug for now. Still open to solutions though.

Answer 1

I don't believe this is going to be possible. The Flash player captures input when it's focused - for example, if you click play in a YouTube video, then hit Ctrl-W to close the tab, it's not going to close until you click on the page outside of the video, returning focus to the browser.

Input control is effectively being passed to another process (the Flash player) while it's focused, so you're not going to be able to capture or act on input until the user explicitly returns control to the browser.

Answer 2

Maybe something like that would work :

$(document).not("iframe").keyup(...

Answer 3

Just stumbled on this.. I know this is a bit old but there is a possible solution (will require more work)...

You could wrap the youtube player in your own flash player (using the API or simply a container) and detect the keypress within flash. You could then call the same javascript function directly from your flash application so it doesn't matter whether you page or the flash app has focus the script you want to run will always be run.