CODEWITHSUNDEEP
javascriptjqueryvideoclickvimeo
Liam
Liam

Reputation: 9855

Can't detect jQuery click on vimeo iframe

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.

Upvotes: 1

Views: 5623

Answers (5)

Max
Max

Reputation: 145

try this:

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

Upvotes: 0

code_monk
code_monk

Reputation: 10128

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>

Upvotes: 7

Golly Gosh
Golly Gosh

Reputation: 56

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

Upvotes: 0

pathfinder
pathfinder

Reputation: 1786

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.

Upvotes: -1

epascarello
epascarello

Reputation: 207547

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

Upvotes: 1

Related Questions