<h1>Bootstrap 3 responsive video embeds that maintain aspect ratio <i class="fa fa-heart"></i></h1>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
   
      <h2>16:9 responsive aspect ratio</h2>
<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/syFZfO_wfMQ"></iframe>
</div>
    </div>
    <div class="col-sm-6">
 

      <h2>4:3 responsive aspect ratio</h2>
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/syFZfO_wfMQ"></iframe>
</div>
    </div>
  </div>
</div>
.container {
  background: #e3e3e3;
  margin-bottom: 20px;
  padding-bottom: 50px;
}
h1 {
  text-align: center;
  margin-bottom: 50px;
}
h1 i {
  color: pink;
}

External CSS

  1. //maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
  2. //maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js