Bootstrap responsive embed not working as expected

Question

embedding video in grid system of Bootstrap 3.1, video is not expanding full width of the grid column. How to make it 100% wide to the parent column keeping the aspect ratio? Also, even if I use a 4:3 video, it appears very wide in the browser with very short height. here is my code:

<div class="row">
   <div class="col-md-8">
   .
   <!-- other items-->
   .
   </div>

   <div class="col-md-4">
            <div class="embed-responsive embed-responsive-4by3">
                            <iframe class="embed-responsive-item" src="//www.youtube.com/embed/gYhi3pAiQY4"></iframe>
            </div>
   </div>
</div>

Answer 1

As Rob said in a comment:

Pretty sure embed-responsive wasn't added until 3.2. Try updating.

Answer 2

If you're unable to update, for one reason or another, you can add the styles yourself. It's fairly straight forward. Here's the SASS:

// Embeds responsive
//
// Credit: Nicolas Gallagher and SUIT CSS.

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;

  .embed-responsive-item,
  iframe,
  embed,
  object,
  video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
  }
}

// Modifier class for 16:9 aspect ratio
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}

// Modifier class for 4:3 aspect ratio
.embed-responsive-4by3 {
  padding-bottom: 75%;
}