CODEWITHSUNDEEP
jqueryyoutube
Fer
Fer

Reputation: 4186

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

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.

Upvotes: 6

Views: 3191

Answers (4)

Simon_Weaver
Simon_Weaver

Reputation: 145880

You can do this by detecting the play state for a video and then setting focus back to the window.

The Flash player for Youtube API is now deprecated - so you should be using IFrame API.

You can use the onStateChange event to detect a state of 1 (playing) and then just call:

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

This will then allow you to use keyup event. Make sure to use window and not document for the focus() call.

Here's the events section of the documentation.

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

Upvotes: 0

rmorse
rmorse

Reputation: 736

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.

Upvotes: 1

Chris Heald
Chris Heald

Reputation: 62638

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.

Upvotes: 1

GregM
GregM

Reputation: 2654

Maybe something like that would work : 

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

Upvotes: 1

Related Questions