Pause Bootstrap Carousel when playing Vimeo video

Question

I have a simple Bootstrap Carousel which includes a video.

Here is my Demo: http://jsfiddle.net/Q2TYv/2053/

Is it possible I can pause the slider when I click 'Play' on the video? Currently when I click Play it still autoplays through the rest of the carousel items.**

Thanks for any advice.

// invoke the carousel
$('#myCarousel').carousel({
  interval: 3000
});

/* SLIDE ON CLICK */ 

$('.carousel-linked-nav > li > a').click(function() {

    // grab href, remove pound sign, convert to number
    var item = Number($(this).attr('href').substring(1));

    // slide to number -1 (account for zero indexing)
    $('#myCarousel').carousel(item - 1);

    // remove current active class
    $('.carousel-linked-nav .active').removeClass('active');

    // add active class to just clicked on item
    $(this).parent().addClass('active');

    // don't follow the link
    return false;
});

/* AUTOPLAY NAV HIGHLIGHT */

// bind 'slid' function
$('#myCarousel').bind('slid', function() {

    // remove active class
    $('.carousel-linked-nav .active').removeClass('active');

    // get index of currently active item
    var idx = $('#myCarousel .item.active').index();

    // select currently active item and add active class
    $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');

});

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');

#myCarousel {
  margin-top: 40px;
}

.carousel-linked-nav,
.item img {
  display: block; 
  margin: 0 auto;
}

.carousel-linked-nav {
  width: 120px;
  margin-bottom: 20px;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
        <img src="http://placehold.it/300x200/444&text=Item 1" />
    </div>
    <div class="item">
        <iframe src="https://player.vimeo.com/video/124400795"></iframe>
    </div>
    <div class="item">
        <img src="http://placehold.it/300x200/444&text=Item 3" />
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

<!-- LINKED NAV -->
<ol class="carousel-linked-nav pagination">
  <li class="active"><a href="#1">1</a></li>
  <li><a href="#2">2</a></li>
  <li><a href="#3">3</a></li>
</ol>

can't you register clicks on iframes and stop the carousel when someone clicks the iframe? — m7o, Apr 12 '15 at 21:19
Is it possible you could show me how to do this? I'm a bit of a JS novice. — michaelmcgurk, Apr 12 '15 at 21:24

score 2 · Accepted Answer · edited May 23 '17 at 12:06

EDIT:

The solution i first posted below does not work because of the same-origin-policy regarding iframes, sorry (see here).

So - using the solution mentioned in that post - this the a bit more elaborate solution:

var overiFrame = false;

$('#myCarousel iframe').hover( function() {
    overiFrame = true;
}, function() {
    overiFrame = false;
});
$(window).blur( function() {
    if(overiFrame){
        $('#myCarousel').carousel('pause');
    }

});

THIS IS NOT WORKING BECAUSE OF THE SAME-ORIGIN-POLICY:

$('#myCarousel .item iframe').on('click', function(){
    $('#myCarousel').carousel('pause');
});

The best solution, without any hacks like above, would probably be to implement the vimeo JS API and use that to register PLAY and PAUSE events on the video.

I have tried this code here: http://jsfiddle.net/Q2TYv/2058/ but no success. Can you try? — michaelmcgurk, Apr 12 '15 at 21:43

score 0 · Answer 2 · answered Apr 13 '15 at 15:50

In order to avoid DOM and iframe sniffing, you can use vimeo frogaloop api's to check if the video is started and if so stop the carousel and when it's ended start it again.

In your HTML you have to add an id to the iframe and pass it in the vimeo querystring like:

<iframe id="myVideo" src="https://player.vimeo.com/video/124400795?api=1&player_id=myVideo"></iframe>

Code:

var iframe = $('#myVideo')[0];
var player = Froogaloop(iframe);


// When the player is ready, add listeners for finish, and playProgress
player.addEvent('ready', function () {
    player.addEvent('finish', onFinish);
    player.addEvent('playProgress', onPlayProgress);
});

function onFinish(id) {
    $('#myCarousel').carousel('play');
}

function onPlayProgress(data, id) {
    $('#myCarousel').carousel('pause');
}

Demo: http://jsfiddle.net/ednzc1de/

Pause Bootstrap Carousel when playing Vimeo video

2 Answers2