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 o

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/

Answer 2

It doesn't seem possible to capture the click event of an iFrame when the content is from another domain. One solution that might be good enough is to pause the animation whenever the user moves the mouse over the iframe and then play it again when the mouse leaves. This seems to work fine even if the user chooses to go fullscreen in the Vimeo player.

<div class="item">
<iframe src="http://player.vimeo.com/video/20183913?title=0&amp;byline=0&amp;portrait=0" width="612" height="344" frameborder="0"></iframe>
</div>

<script type="text/javascript">
$("div.item iframe")
.mouseover(function(){
    alert("Pause animation");
})
.mouseout(function(){
    alert("Play animation");
});
</script>

Here's my little test http://jsfiddle.net/r8guJ/

Answer 3

You can use this jQuery plugin : https://github.com/finalclap/iframeTracker-jquery.

Select the vimeo player iframe with a jQuery selector and set a callback function that will turn off the slider (or do anything else) :

jQuery(document).ready(function($){
    $('.vimeo_player iframe').iframeTracker({
        blurCallback: function(){
            // Stop your slider
        }
    });
});

Answer 4

It seems like it would easier to use Vimeo's API to register for events fired by the player.

An example can be found here: https://github.com/vimeo/vimeo-api-examples/blob/master/moogaloop-api/javascript/froogaloop.html

Documentation: http://vimeo.com/api/docs/moogaloop

IN ACTION: http://jsfiddle.net/u5jG6/