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

ruby-on-rails-3 twitter-bootstrap youtube-api responsive-design
pglombardo picture pglombardo · Aug 28, 2012 · Viewed 38.9k times · Source

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

Bart Naus picture Bart Naus · Sep 2, 2012

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>

Related questions

How to change navbar collapse threshold using Twitter bootstrap-responsive?

I'm using Twitter Bootstrap 2.0.1 in a Rails 3.1.2 project, implemented with bootstrap-sass. I'm loading both the bootstrap.css and the bootstrap-responsive.css files, as well as the bootstrap-collapse.js Javascript. I have a fluid layout with a navbar similar to the …

Read More
Rails 3.2 using content_tag to generate a 'Delete' button with twitter-bootstrap icons

I'm trying to replicate the Delete button icon in this example using the Rails 3 content_tag method, within a nested form and using jQuery unobtrusively (or at least I hope to be). Twitter-Bootstrap Delete Button icon (example) The html produced …

Read More
How to integrate a Wrap Bootstrap theme into an Rails application?

I have bought a twitter bootstrap theme from wrapbootstrap. I already have a functional rails application. Now, I want to design my application by integrating the bootstrap theme into my application. I am new to this and I have no …

Read More