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...

possible duplicate of [How to add click event to a iframe with JQuery](http://stackoverflow.com/questions/1609741/how-to-add-click-event-to-a-iframe-with-jquery) — Felix Kling, Feb 22 '11 at 19:03
@Felix, that question was never answered. This `iframe` is content from a 3rd party, so the solution presented in the other question doesn't work. — James Skidmore, Feb 22 '11 at 19:06
Oh ok. Sorry, I skimmed the question to quickly then. There is no possibility afaik. I mean if you put a div above the iframe, you should be able to capture the click events, but they won't be forwarded to the iframe anymore. — Felix Kling, Feb 22 '11 at 19:07

dochoffiday · Accepted Answer · 2011-02-22T20:03:15.463

2

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/

edited Feb 22 '11 at 20:03

answered Feb 22 '11 at 19:43

dochoffiday

5,515
6
32
41

This is what I ended up doing. Thanks for your help Doc Hoffiday! – James Skidmore Feb 23 '11 at 07:36

score 2 · Answer 2 · answered Feb 22 '11 at 19:45

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/

Thanks! I didn't read careful enough to see that you always loaded content from Vimeo. In that case Doc Hoffiday's solution is definitely better. — jimmystormig, Feb 23 '11 at 07:41

Montana Harkin · Answer 3 · 2011-09-30T21:14:07.673

2

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/

edited Sep 30 '11 at 21:14

answered Sep 30 '11 at 21:07

Montana Harkin

399
5
13

1st. THANK YOU! 2nd. Suggestion: use .live() or .on() as the iframe might not be in DOM when binding the events (particularly for Facebook and other social widgets). Also I had several social widgets on my page side by side using this technique - and I found I needed to clear the timeout on mouseout (else the clock keeps ticking over and I got an "assumed click" to quickly on other iframes)... In your code add `var hoverTimeout;` at the top, then `hoverTimeout = setTimeout(function() {` and inside the "mouseout" function add `clearTimeout(hoverTimeout);`. – Chris Jacob Mar 14 '12 at 02:38
3rd Suggestion: If you are "assuming clicks" for Stats (e.g. Google Analytics) I recommend you store (cache) "assumed clicks" in an array. And only allow 1 assumed click per page load... reason for this is that social widgets (like Facebook's Like) pop open additional iframe's after you Like/Unlike ... this results in additional "assumed clicks" when you hover over those iframes. – Chris Jacob Mar 14 '12 at 03:02

score 1 · Answer 4 · answered Apr 03 '13 at 17:44

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
        }
    });
});

How to capture click event with jQuery for iframe?

4 Answers4

Linked