Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
      <iframe id="vimeo-player1" src="https://player.vimeo.com/video/40977539?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
      <iframe id="vimeo-player2" src="https://player.vimeo.com/video/126600274?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
      <iframe id="vimeo-player3" src="https://player.vimeo.com/video/118120670?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div>
    <div role="tabpanel" class="tab-pane" id="settings">
       <iframe id="vimeo-player3" src="https://player.vimeo.com/video/181964440?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div>
 ...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

JavaScript

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
	// You have access to both tabs
  var previousActiveTabId = $(e.relatedTarget).attr('href');
  var newlyActivatedTabId = $(e.target).attr('href');

	// Now you can stop the video like this
	var playerToPause = new Vimeo.Player($(previousActiveTabId).find('iframe')[0]);
  playerToPause.pause();
  
  var playerToPlay = new Vimeo.Player($(newlyActivatedTabId).find('iframe')[0]);
  playerToPlay.play();

});