Twitter Bootstrap Question posted in

Bootstrap carousel – pause/Stop the YouTube video while sliding next slide in model box – Twitter bootstrap

I have Twitter Bootstrap modal box with carousel multiple slide videos and images. I am adding a YouTube Video to my Twitter Bootstrap carousel. Problem is it moves next slide video still playing in background so I want to stop/pause it on the next/prev slide.

Also i need to stop YouTube Video when close Twitter Bootstrap modal box

I have search around SO but didn’t find similar question.

Tags:

3

Answers


  1. 0

    Try this code

    $("video").each(function () { this.pause() });

    $('#myCarousel').carousel({
  interval: 0
});
$('.carousel-control.left').click(function() {
  $('#myCarousel').carousel('prev');
});

$('.carousel-control.right').click(function() {
  $('#myCarousel').carousel('next');
  $("video").each(function () { this.pause() });
});
$('button.close').click(function(){
  $("video").each(function () { this.pause() });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<div class="row">
    <div class="span4 offset4">
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
    </div>
</div>

<div class="modal fade hide" id="myModal" data-keyboard="true">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
  </div>
  <div class="modal-body">
    <div id="myCarousel" class="carousel slide">
      <!-- Carousel items -->
      <div class="carousel-inner">
        <div class="active item">
          <video width="400" controls>
            <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
          </video>
        </div>
        <div class="item">
           <img src="http://placehold.it/300x200/aaa&text=Item 2" />
        </div>
        <div class="item">
          <img src="http://placehold.it/300x200/444&text=Item 3" />
        </div>
      </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>
</div>
    Login or Signup to reply.
  2. 0 
    $(function() {
    $('.carousel').on('slide.bs.carousel',function(e){
        var prev = $(this).find('.active').index();
        var next = $(e.relatedTarget).index();
        var video = $('#video-player')[0];
        var videoSlide = $('#video-player').closest('.carousel-item').index();
        if (next === videoSlide) {
            createVideo(video);
        }
    }); 
});
    Login or Signup to reply.
  3. 0 
    function createVideo(video) {
  var youtubeScriptId = 'youtube-api';
  var youtubeScript = document.getElementById(youtubeScriptId);
  var videoId = video.getAttribute('data-video-id');

  if (youtubeScript === null) {
    var tag = document.createElement('script');
    var firstScript = document.getElementsByTagName('script')[0];

    tag.src = 'https://www.youtube.com/iframe_api';
    tag.id = youtubeScriptId;
    firstScript.parentNode.insertBefore(tag, firstScript);
  }

  window.onYouTubeIframeAPIReady = function() {
    window.player = new window.YT.Player(video, {
      videoId: videoId,
      playerVars: {
        autoplay: 1,
        modestbranding: 1,
        rel: 0
      }
    });
  }
}
    posted by mehaboob from digitalizing india
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search