Pause video on Bootstrap Tab Change

Question

Various version of this question have been asked, but I couldn't find much involving multiple videos and Bootstrap's tabs.

What I need is for a given player to pause when another tab is clicked.

 <div class="row">
            <div class="col-lg-12">
                <ul class="nav nav-tabs" role="tablist" id="myTab">
                    <li class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab1</a></li>
                    <li><a href="#tab2" role="tab" data-toggle="tab">Tab2</a></li>
                    <li><a href="#tab3" role="tab" data-toggle="tab">Tab3</a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane fade in active" id="tab1">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe id="video1" class="embed-responsive-item" src="//www.youtube.com/embed/7kq5f_apsuM?enablejsapi=1"></iframe>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab2">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe id="video2" class="embed-responsive-item" src="//www.youtube.com/embed/yWqG8ysc3BE?enablejsapi=1"></iframe>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab3">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe id="video3" class="embed-responsive-item" src="//www.youtube.com/embed/EVfGs78wD-c?enablejsapi=1"></iframe>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Here's a jsFiddle: http://jsfiddle.net/o4eebLp4/

[**This**](http://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe) should help you. — ɐsɹǝʌ ǝɔıʌ, Oct 01 '14 at 07:28

score 4 · Answer 1 · answered Jan 23 '15 at 16:40

I found this solution using the native bootstrap tab events. This is the best solution after a long time searching a way without using any special targeting of iframe or video ids.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var iframe = $(e.relatedTarget.hash).find('iframe'); 
  var src = iframe.attr('src');
  iframe.attr('src', '');
  iframe.attr('src', src);
});

score 2 · Answer 2 · edited May 23 '17 at 11:48

In case you have one or more videos in a web page the following works to stop the videos when you navigate to another page. This is based on @fricks answer and the excellent solution to close videos in a modal by @thekingoftruth above.

$(function(){
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var $iframes = $(e.relatedTarget.hash).find('iframe');
    $iframes.each(function(index, iframe){
      $(iframe).attr("src", $(iframe).attr("src"));
    });
  });
});

Thibaud Granier · Answer 3 · 2014-10-01T14:18:58.297

0

You need javascript :

$('#myTab a').click(function (e) {
var selected = $(this).parent().index();
$('#myTab a').each(function(index){
    if(index != selected){
        var iframe = $(".tab-content").children().eq(index).children().children().contents();
       iframe.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')            
    }
});
});

edited Oct 01 '14 at 14:18

answered Oct 01 '14 at 10:35

Thibaud Granier

380
2
7

Hey @thibaud-granier, tried the code and couldn't get it to work (the videos don't pause). http://jsfiddle.net/o4eebLp4/1/ – patrickhills Oct 01 '14 at 13:47

Pause video on Bootstrap Tab Change

3 Answers3