Issue with pause/playing multiple videos in 'horizontal' or 'vertical' modes.

[brainbrian]

When using either 'horizontal' or 'vertical' modes, you are duplicating the first and last slide. This becomes an issue when embedding multiple Vimeo videos. I now will be faced with a conflict of multiple IDs. Each Vimeo video needs a player ID for the Froogaloop API to recognize it. I'd suggest you find a way to do these transitions without duplicating slides. There is no way for me to use either mode and I'm forced to use the 'fade' mode if I'm going to get this code to work correctly. I'm att a point where I have to use Flexsider, which I think is a huge bummer because I love BX Slider so much!

<ul class="bxslider">
    <li><iframe id="player_1" src="http://player.vimeo.com/video/63287498?api=1&amp;player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></li>
    <li><img src="/_/img/placeholder.jpg" /></li>
    <li><iframe id="player_2" src="http://player.vimeo.com/video/61585443?api=1&amp;player_id=player_2" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></li>
    <li><iframe id="player_3" src="http://player.vimeo.com/video/60203283?api=1&amp;player_id=player_3" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></li>
</ul>

$(window).load(function() {
    var vimeoPlayers = $('.bxslider').find('iframe'), player, slider;
    // add ready event to vimeo players
    for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
            player = vimeoPlayers[i];
            $f(player).addEvent('ready', ready);
    }
    function addEvent(element, eventName, callback) {
        if (element.addEventListener) {
            element.addEventListener(eventName, callback, false);
        } else {
            element.attachEvent(eventName, callback, false);
        }
    }
    function ready(player_id) {
        var froogaloop = $f(player_id);
        froogaloop.addEvent('play', function(data) {
            slider.stopAuto();
        });
        froogaloop.addEvent('pause', function(data) {
            slider.startAuto();
        });
    }
    slider = $('.bxslider').bxSlider({
        video: true,
        useCSS: false,
        auto: true,
        autoHover: true,
        speed: 500,
        randomStart: true,
        controls: false,
        mode: 'fade',
        onSlideBefore: function($slideElement, oldIndex, newIndex){
            var prevSlide = $('.bxslider li').eq(oldIndex);
            if (prevSlide.find('iframe').length !== 0) {
                $f( prevSlide.find('iframe').attr('id') ).api('pause');
            }
        }
    });
});

[stevenwanderski]

You raise a good point and I will look into it :)

[baw]

Is there any update on a fix for this?

[simon6167]

+1 for an update

[hchris28]

I know this is an old post, but we just came up against this and I thought I'd post our findings. While we were able to work around this issue, it's worth mentioning that we didn't use autoStart, so we weren't trying to start/stop the slide show on video pause/play, we just wanted the videos to stop on slide change.

Workaround The code in the original post works perfectly as-is in horizontal mode if you set infiniteLoop to false. This removes the cloned (duplicated) slides. If you don't need infiniteLoop this works great.

Partial Solution We also found that we could get it mostly working with infiniteLoop enabled if you change this line

var prevSlide = $('.bxslider li').eq(oldIndex);

to

var prevSlide = $('.bxslider li:not(.bx-clone)').eq(oldIndex);

The last problem, which we didn't solve was that the video on the last slide does not stop when changing slides. It works for all other slides however.