Stop Vimeo embeds on previous / next buttons within Jquery Infinite Carousel

My setup: http://jsfiddle.net/ASa2K/1/

I have a Jquery Infinite Carousel which will have in it embedded Vimeo vids.

When 'Next' or 'Prev' is clicked, I would like it to stop all videos. Currentl开发者_JS百科y it keeps playing the videos while clicking through.

I've looked around but can't find much specific to my problem. I'm not so well-versed in js as you might have guessed!

Hej so first of you can find the api here

http://vimeo.com/api/docs/player-js

since its an iframe there is no back compatible way of communicating with it but there is something called postMessage that new browsers has. so You can write this.

$("iframe").each(function() {
  this.contentWindow.postMessage('{ "method": "pause" }', "http://player.vimeo.com");
});

the different methods are documented on the page. but this pauses all players.

Here's a sample that should let you call from a button click:

<script>
    function pauseAllVideos(){
        $("iframe").each(function() {
            this.contentWindow.postMessage('{ "method": "pause" }', "http://player.vimeo.com");
        });
    }
</script>

And this is the code from your html:

<a href="#" onClick="pauseAllVideos(); return false;">PAUSE VIDEOS</a>

@megakorre's solution worked for me. Simple and easy.

One caveat: If your domain is using https, it won't work unless you change http to https like this:

this.contentWindow.postMessage('{ "method": "pause" }', "https://player.vimeo.com");