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.

Answer 1

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>

• http://developer.vimeo.com/player/js-api
• http://jsfiddle.net/bdougherty/HfwWY/light
• https://github.com/vimeo/player-api/tree/master/javascript

Answer 2

它是iframe中的第三方domian，由于相同的原产地政策 ，您无法执行此操作。

Answer 3

try this:

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

Answer 4

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.

Answer 5

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