TabbedVideos

by Rynne Cowham

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<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">Babies</a></li>
                        <li><a href="#tab2" role="tab" data-toggle="tab">Kittens</a></li>
                        <li><a href="#tab3" role="tab" data-toggle="tab">Puppies</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/dmVzCf_G1-k?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/VPFvIauSusY?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/a6KGPBflhiM?enablejsapi=1"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

CSS

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.row {
    padding:10px;
}

JavaScript

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