Bootstrap carousel - pause when YouTube video played

carousel, jquery, twitter-bootstrap, youtube

Solution

I created an overlap over the video:

.video_mask{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:275px;
  z-index:25;
  opacity:0;
}

When I click on the mask, I set the corresponding iframe to autoplay, hide the mask, and pause the carousel:

 $('.video_mask').click(function(){
    iframe = $(this).closest('.item').find('iframe');
    iframe_source = iframe.attr('src');
    iframe_source = iframe_source + "?autoplay=1"
    iframe.attr('src', iframe_source);
    // hide the mask
    $(this).toggle();
    // stop the slideshow
    $('.projectOverviewCarousel').carousel('pause');
  });

When the user clicks on the carousel controls, it resets all masks and iframe urls:

  $('.projectOverviewCarousel').on('slide', function(){
    var iframeID = getID($(this).find('iframe').attr("id"));
    // stop iframe from playing
    if(iframeID != undefined){
      callPlayer(iframeID, 'stopVideo');
    }
    // turn on all masks
    $('.video_mask').show();
    // reset src of all videos
    $('.projectOverviewCarousel').find('iframe').each(function(key, value){
      url = $(this).attr('src');
      if(url.indexOf("autoplay")>0){
        new_url = url.substring(0, url.indexOf("?"));
        $(this).attr('src', new_url);
      }
    });

Some things to check out for: make sure the controls for the bootstrap carousel have a z-index greater than the mask (so the person can still progress the slideshow manually).

Hope this is useful to someone else!

Problem

I have some embedded YouTube videos in my Bootstrap carousel. By default, the carousel advances automatically, but I'd like to to pause when a video is playing. Is there a trick to detecting when the video is playing? I'd like to do it without using the YouTube API if possible (each carousel has an arbitrary number of videos, and I'd like not to create instances of every video). Edit: Final Design I created an overlap over the video: ``` .video_mask{ position:absolute; top:0; left:0; width:100%; height:275px; z-index:25; opacity:0; } ``` When I click on the mask, I set the corresponding iframe to autoplay, hide the mask, and pause the carousel: ``` $('.video_mask').click(function(){ iframe = $(this).closest('.item').find('iframe'); iframe_source = iframe.attr('src'); iframe_source = iframe_source + "?autoplay=1" iframe.attr('src', iframe_source); // hide the mask $(this).toggle(); // stop the slideshow $('.projectOverviewCarousel').carousel('pause'); }); ``` When the user clicks on the carousel controls, it resets all masks and iframe urls: ``` $('.projectOverviewCarousel').on('slide', function(){ var iframeID = getID($(this).find('iframe').attr("id")); // stop iframe from playing if(iframeID != undefined){ callPlayer(iframeID, 'stopVideo'); } // turn on all masks $('.video_mask').show(); // reset src of all videos $('.projectOverviewCarousel').find('iframe').each(function(key, value){ url = $(this).attr('src'); if(url.indexOf("autoplay")>0){ new_url = url.substring(0, url.indexOf("?")); $(this).attr('src', new_url); } }); ``` Some things to check out for: make sure the controls for the bootstrap carousel have a z-index greater than the mask (so the person can still progress the slideshow manually). Hope this is useful to someone else!

Original source