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 — Felix Kling
– Felix Kling, Commented Feb 22, 2011 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
– James Skidmore, Commented Feb 22, 2011 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
– Felix Kling, Commented Feb 22, 2011 at 19:07

dochoffiday · Accepted Answer · 2011-02-22 20:03:15Z

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, 2011 at 20:03

answered Feb 22, 2011 at 19:43

dochoffiday

5,6057 gold badges35 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Skidmore Over a year ago

This is what I ended up doing. Thanks for your help Doc Hoffiday!

jimmystormig · Accepted Answer · 2011-02-22 19:45:44Z

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/

answered Feb 22, 2011 at 19:45

jimmystormig

10.9k1 gold badge31 silver badges28 bronze badges

1 Comment

jimmystormig Over a year ago

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.

Montana Harkin · Accepted Answer · 2011-09-30 21:14:07Z

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, 2011 at 21:14

answered Sep 30, 2011 at 21:07

Montana Harkin

4195 silver badges13 bronze badges

2 Comments

Chris Jacob Over a year ago

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 Over a year ago

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.

Vince · Accepted Answer · 2013-04-03 17:44:22Z

1

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

answered Apr 3, 2013 at 17:44

Vince

3,3542 gold badges28 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to capture click event with jQuery for iframe?

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related