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", :frameborder => "0", :allowfullscreen => nil, :src => v.video_url } 

Unfortunately, this doesn't respond well when resizing the browser or on mobile devices because of the static height.

What would be a better (more dynamic and responsive) way to implement this embedded iframe for Youtube?

Answer 1

Try this "Responsive video CSS", it works perfect for me: https://gist.github.com/2302238

<section class="row">   <div class="span6">     <div class="flex-video widescreen"><iframe src="https://www.youtube-nocookie.com/embed/..." frameborder="0" allowfullscreen=""></iframe></div>   </div>   <div class="span6">     ...   </div> </section>