Can't detect jQuery click on vimeo iframe

Question

Simple Vimeo iframe click does not work:

$('iframe').click(function(){
    alert('ok');
});

I've also tried:

$('body').click(..
$(document).on('click','iframe',..

But when user clicks video while hovering it, nothing works, it just plays the video.

Perhaps the [Vimeo JavaScript API](http://developer.vimeo.com/player/js-api) will meet your needs — DACrosby, Jul 07 '13 at 06:27
yeah that way is working like a charm but i still wonder is there an alternate way to detect click without using api @DACrosby — Barlas Apaydin, Jul 07 '13 at 17:56
@BarlasApaydin It seems like you're out of luck. Since the iframe is on a different domain name than your own, you basically can't without the API to my knowledge. [Here's me trying](http://jsfiddle.net/daCrosby/XWybM/). [Here's an SO post that explains it pretty well](http://stackoverflow.com/a/3083131/1265817). — DACrosby, Jul 07 '13 at 18:59

score 7 · Answer 1 · answered Jul 04 '13 at 01:44

7

if you include the query parameter api=1 in your embed code, you can access events, including those events triggered when the user clicks the video in the iframe (play,pause). You'll also probably want to include their froogaloop.js file to more easily access these events.

<iframe id="player1" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" width="400" height="225"></iframe>

answered Jul 04 '13 at 01:44

code_monk

9,451
2
42
41

+1 from me for good answer but can't you show an alternative and easier way to just sens click on iframe with jsFiddle? Than i'll give you the bounty (: – Barlas Apaydin Jul 04 '13 at 15:55
anyways, it seems we don't have another way for detecting lick without api, bounty is yours. – Barlas Apaydin Jul 07 '13 at 19:31

score 1 · Answer 2 · answered Nov 28 '12 at 14:35

1

It is a third party domian in the iframe, you can not do it because of same origin policy.

answered Nov 28 '12 at 14:35

epascarello

204,599
20
195
236

score 0 · Answer 3 · edited Jul 07 '13 at 18:42

0

try this:

$('iframe').contents()
           .find('[src*="vimeo.com"]')
           .click(
               function(){
                  alert('foo');
               }
            );

edited Jul 07 '13 at 18:42

DACrosby

11,116
3
39
51

answered Nov 28 '12 at 14:53

Max

145
8

score 0 · Answer 4 · edited May 23 '17 at 11:44

0

Unfortunately, you cannot track clicks in cross-domain iframes due to same origin policy, as epascarello has previously said.

You could set up a "thumbnail" that the user clicks, which would pull up that popup and then subsequently replace the thumbnail with the actual video. Just embed the video you want, but keep it as a hidden div, then use .show() when you want it to start playing.

Source

edited May 23 '17 at 11:44

Community

1
1

answered Jul 03 '13 at 23:00

Golly Gosh

56
3

thanks for return but you can play better than this mate, where is working jsFiddle? – Barlas Apaydin Jul 03 '13 at 23:02
we can use vimeo api for detecting it. – Barlas Apaydin Jul 07 '13 at 02:45

score -1 · Answer 5 · answered Nov 28 '12 at 19:58

I found that before I could get anything inside the iframe to be found I needed to determine if the iframe was loaded. Then if the iframe gets loaded after page load or reloaded later in the process, your click function works.

jQuery('#iframe').load(function() {
   jQuery('#iframe').contents().find('#play-button').click(function () {
        // do your stuff
    });
}

** this may or may not work cross-domain, but determining if the iframe loaded can be used as a hackish method of determining if something has happened in the iframe. If you created a "play" button on your domain on top of the iframe it could be used to load the iframe via a click function after page load and then your load function could contain your slideshow pause.

Can't detect jQuery click on vimeo iframe

5 Answers5