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>