I'm building a small application for my son, who - due to his handicap - is incapable of using the computer with a standard mouse. Because of that I'd like to navigate trough the application with the use of the so called MakeyMakey, an Arduino based microcontrolller. (www.makeymakey.com).
The idea: Using predefined search queries displayed as images and positioned on top of the page, my son is able to choose and display a maximum of fifty movies related to the predefined query. He does that with 're-mapped' 'TAB' and 'ENTER' keys on the MakeyMakey. Where TAB walks through the different predefined queries and/or movies and ENTER opens the jQuery popup with the youtube movie. So far, so good. (For a simple but working draft-view of my project you can visit http://www.productiondesign.nl/youtube/)
My problem is focus(). Focus from the overview page to the Youtube movie and back.
Let my explain. As you can see on my project page, all works well except for the focus. When the jQuery popup is called and the Youtube movie starts playing, the (program) focus remains on the overview page... This means that without a left-mouse-click in the youtube movie area, the Youtube movie can not be paused, muted or fastforwarded etc.
I'm searching for a solution to get focus on the movie as soon as the jQuery pop-up is called so that the native Youtube keyboard shortcuts like: play/pauze, fastforward etcetera will be immediately available without the left-mouse-(gain focus) click.
In relation with focusing on the movie, I'd like to assign the keyboard 'X' key close the pop-up and return to the overview page where another movie can be selected and played to make the "circle round".
The question: What do I need to adjust in the code to make this 'focus toggle' possible?