Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap carousel - pause when YouTube video played

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!

like image 888
scientiffic Avatar asked Aug 14 '13 20:08

scientiffic


People also ask

How do I pause bootstrap carousel?

You'll need to call the pause function like this: $("#myCarousel"). carousel('pause'); . This is how all methods are called on bootstrap components, following the jQuery UI convention. You can restart the carousel by listening to the blur event then calling the cycle method.

How do I stop carousel playing videos?

For Youtube iframe videos to trigger a pause on the sliding of the carousel whenever a video is playing, you need to have an indicator on whether a video is considered "playing". You can achieve this by using the player functionalities of the Youtube iframe API with JavaScript.

How do I get my carousel slider to stop clicking?

click(function(){ alert("Clicked."); $('#myCarousel'). carousel({ pause: true, interval: false }); });

How do I stop carousel from moving automatically?

Use the [interval]="'0'" input. This will disable the auto-sliding feature. Here's the link to the Carousel Documentation.


1 Answers

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!

like image 178
scientiffic Avatar answered Sep 16 '22 14:09

scientiffic