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

Question

The odd question would be like that, but here. I have a page on which I display a photo in large format, for example, in a lightbox. When you press ESC, I close the page and return the user to the page where he came from, which shows the photos in normal format:

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

However, the same lightbox page also has a sidebar that can contain embedded Youtube videos. Users can zoom this video to full screen using standard Youtube video player controls. If the user presses ESC in this scenario, he closes the full-screen video and returns to the lightbox page (the standard behavior of the built-in player that I want), however, the ESC key event, and then also my activation code, which closes the lightbox, is undesirable in this particular scenario.

I found that it flocks to be there in Chrome, but not in Firefox. Essentially, I want my ESC code not to run when you press ESC to close the Youtube player, but so that it only works when users press ESC when they watch a photo (not a video).

I searched event.target to distinguish between these scripts, but so far no luck. Any ideas?

Update: I am going to accept this error only for Chrome. However, they are open to solutions.

Answer 1

I do not believe that it will be possible. Flash Player captures input when it is focused - for example, if you press the play button on a YouTube video, press Ctrl-W to close the tab, it does not close until you click on a page outside the video, returning focus to the browser.

The control of the input signal is effectively transferred to another process (Flash Player) during its focus, so you cannot capture or act on the input until the user explicitly returns control to the browser.

Answer 2

Perhaps something like this will work:

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

Answer 3

Just stumbled upon this .. I know this is a little outdated, but there is a possible solution (more work will be needed) ...

You can wrap the YouTube player in your own Flash player (using the API or just a container) and detect a keystroke in the flash. Then you can call the same javascript function directly from your Flash application, so it doesn’t matter if your page or flash application focuses on the script you want to run will always be executed.

Answer 4

You can do this by detecting the playback status for the video and then returning the focus back to the window.

The Flash Player for Youtube API is now deprecated - so you should use the IFrame API.

You can use the onStateChange event to detect state 1 (playing) , and then simply call:

 `$(window).focus()` (jQuery syntax) 

This will allow you to use the keyup event. Be sure to use window , not document to call focus() .

Here is the documentation events section.

https://developers.google.com/youtube/iframe_api_reference#Events