Vimeo API not working with multiple videos

api, froogaloop, javascript, vimeo

Solution

Nevermind! Figured it out.

Replacing this bit of code

$f(vimeoPlayer).addEvent('ready', ready);

With this

jQuery('iframe').each(function(){
            Froogaloop(this).addEvent('ready', ready);
});

fixed the problem! So the working javascript code is

<script type="text/javascript">
$(function(){

jQuery('iframe').each(function(){
            Froogaloop(this).addEvent('ready', ready);
});

function ready(player_id) {

    froogaloop = $f(player_id);

    function setupEventListeners() {
        function onPlay() {
            froogaloop.addEvent('play',
            function(){
                $("#audio-player")[0].pause();
                $("#header-button-sound-play").hide();
                $("#header-button-sound-pause").show();
            });
        }

        onPlay();

    }
    setupEventListeners();
}

}) 
</script>

Thanks to http://labs.funkhausdesign.com/examples/vimeo/froogaloop2-api-basics.html

for the help!

Problem

I'm having some trouble using the Vimeo API with multiple videos. The code I'm using pauses the ``` <audio id="audio-player" autoplay="autoplay" loop> <source src="music/peanutbutter.mp3" type="audio/mpeg"> </audio> ``` from playing, but it's only working on the first video iframe. If I click the Play button on the 2nd, 3rd, or 4th vimeo iframes it unfortunately isn't pausing the audio on the page. It's probably a simple fix but I'm going crazy trying to figure this out. Thanks! ``` <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> <script type="text/javascript"> $(function(){ var vimeoPlayer = document.querySelector('iframe'); $f(vimeoPlayer).addEvent('ready', ready); function ready(player_id) { froogaloop = $f(player_id); function setupEventListeners() { function onPlay() { froogaloop.addEvent('play', function(){ $("#audio-player")[0].pause(); $("#header-button-sound-play").hide(); $("#header-button-sound-pause").show(); }); } onPlay(); } setupEventListeners(); } }) </script> <div id="dwf-trailer" class="content"><iframe id="player_1" src="http://player.vimeo.com/video/35740045?api=1&player_id=player_1" width="745" height="393" frameborder="0"></iframe></div> <div id="inkpaper-watch" class="content"><iframe id="player_2" src="http://player.vimeo.com/video/33359230?api=1&player_id=player_2" width="745" height="393" frameborder="0"></iframe></div> <div id="ramon-watch" class="content"><iframe id="player_3" src="http://player.vimeo.com/video/44427351?api=1&player_id=player_3" width="745" height="393" frameborder="0"></iframe></div> <div id="thatsunday-watch" class="content"><iframe id="player_4" src="http://player.vimeo.com/video/46602515?api=1&player_id=player_4" width="745" height="393" frameborder="0"></iframe></div> ```

Original source