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>

Czarist

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

jsbin.com/yolalu/1/edit -- yes, @Yocum is correct. Responsive embed wasn't added until a couple weeks ago or so with 3.2 – Myth

Thanks a lot Rob and BootstrapThemer.... It worked :) – Czarist

Please do not use "bootstrap" tag, use "twitter-bootstrap" since it means something else – Cause

Answer 1

As Rob said in a comment:

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

Rhapsodic

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%;
}

Rowlandson