html - How to capture click event with jQuery for iframe?

Question

I'm trying to pause the slider on the homepage when a video is played so it doesn't keep sliding. Check it out here.

I've tried adding a div on top of it and capture the click events for the div, but that doesn't work. It just passes the events on to the iframe I suppose. Note that the iframe is loading content from Vimeo, not from my site.

Any ideas on how to make this work, or any other way to pause the slider when the video is played? I seem to be at a dead end with no options...

Answer 1

Another method of detecting clicks in a small iframe, such as the Facebook iframe, is to use the mouseenter and mouseleave events.

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fisthegovernmentopen.info%2F&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe>

var inIframe = false;
$('iframe[src^="http://www.facebook.com"]')
.bind('mouseover', function(){
  console.log('entered iframe');
  inIframe = true;
  setTimeout(function() { 
    if ( inIframe ) { console.log('clicked on iframe'); }
  }, 1000);
})
.bind('mouseout', function(){
  console.log('left iframe');
  inIframe = false;
});

http://jsfiddle.net/gQzeA/