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

I implemented a pure CSS solution which works great.

Here is an example of code in my view using the iframe code generated in YouTube.

Here is an example of code in another view where instead of using iframe I used the body field generated from the AutoHtml gem, which is used for embedding different types of video links into a web page. This is good if you have a model where a link needs to be dynamically embedded into the same web page.

         
  <%= @livevideo.body_html %>

Here is the CSS code:

.video-container { 
   position: relative; /* keeps the aspect ratio */ 
   padding-bottom: 56.25%; /* fine tunes the video positioning */ 
   padding-top: 60px; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Here is the YouTube video which explains in great detail how the code works and give one or two blog posts to check out.

http://www.youtube.com/watch?v=PL_R3zEjqEc