Search code examples
jqueryarraysvimeojquery-cycle

Pausing Vimeo player on each Cycle slide


I'm trying to pause vimeo players in each Cycle slide, which I'm able to do succesfully if I declare them individually in my script like this:

$(function() {
    var iframe1 = $('#player1')[0];
    var iframe2 = $('#player2')[0];
    var iframe3 = $('#player3')[0];
    var player1 = $f(iframe1);
    var player2 = $f(iframe2);
    var player3 = $f(iframe3);

    $('.cycle-pager').click(function() {
        player1.api('pause');
        player2.api('pause');
        player3.api('pause');
    });
});

However, I'd like to pass them through an array so that I don't have to do all the manual declration. I've attempted to do this, but it's not working. It's saying that the froogaloop script doesn't allow substrings to be passed:

$(function() {
    var vimeoiframes = $('iframe').contents().find('body').toArray();

    for (var a = 0; a < vimeoiframes.length; a++) {
        $f( vimeoiframes[a] );
    }

    $('.cycle-pager').click(function() {
        for (var i = 0; i < vimeoiframes.length; i++) {
            vimeoiframes[i].api('pause');
        }
    });
});

Anyone have any tips or maybe a better solution to deal with this?

Thanks!


Solution

  • Untested but should work.

    $(document).ready(function () {    
      $("iframe").each(function () {
        var frame = $f(this);
        $(".cycle-pager").on('click', function () {
          frame.api('pause');
        });
      });
    });