JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.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">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>

CSS

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