How to implement a responsive Youtube embed iframe with Twitter Bootstrap?

Question

Currently I\'m embedding Youtube videos with the following HAML code in a Twitter Bootstrap based site:

.row
  .span12
    %iframe.span11{ :height => \"720\",         


        

Answer 1

Bootstrap 3.2.0 comes with a several improvements and a large number of bug fixes. A framework for building websites with a responsive design, Bootstrap was missing support for responsive , and elements, feature added in this latest version.

The HTML for a responsive YouTube 16:9 video that adjusts its size based on the width of the page it is displayed in looks like this:

On your container(maybe DIV) add class="embed-responsive embed-responsive-16by9"