Youtube video iframe API - How to pause the video when it looses focus?

Question

I'm using the Youtube video iframe API and everything works perfect. There's only one thing left for it to work as i spected: I want to detect when the video focus is out, even if it happends in the same window or browser tab, for it to stop playing, or pause.

i have been trying with jquery:

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        player.blur(function(){
            $(this).stopVideo();
        });
    }
}

But it doesn't seems to work. Can somebody help?

Is the video created dynamically? If so, you need to bind it on a parent object of some kind. Also, you can try the .on('focusout', function(){}) style of losing focus. — Araymer, Jan 09 '16 at 22:33
Yes, it is loading dinamically. So, you say i can achieve this by doing this: `$('#video-parent).on('focusout', function(){});`. — Gerardo Peña Pérez, Jan 09 '16 at 22:39

score 1 · Answer 1 · answered Jan 09 '16 at 22:48

1

Try attaching an on method as such:

$('#parentElement').on('focusout', '.playerSelector', function() { //DO STUFF// });

answered Jan 09 '16 at 22:48

Araymer

1,315
1
10
16

Youtube video iframe API - How to pause the video when it looses focus?

1 Answers1