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

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>

Answer 2

Just to automatize @Bart's answer, I've created a simple Javascript snipped that automatically wraps iframe elements within <div class="flex-video">

$(document).ready(function() {
  $('iframe').each(function() {
    $(this).wrap('<div class="flex-video"></div>');
  });
}); 

Answer 3

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.

<div class="video-container">
  <iframe width="300" height="168" src="http://www.youtube.com/embed/MY__5O1i2a0" frameborder="0" allowfullscreen></iframe>
</div>

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.

<div class="video-container">         
  <span style="text-align: center;"><%= @livevideo.body_html %></span>
</div>

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

Answer 4

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"

Answer 5

This is probably best done with jQuery: http://www.seanmccambridge.com/tubular/ or http://okfoc.us/okvideo/

Answer 6

If using bootstrap, the method below is without a doubt the easiest way to implement a responsive embed:

<!-- 16:9 aspect ratio -->
 <div class="embed-responsive embed-responsive-16by9">
   <iframe class="embed-responsive-item" src="..."></iframe>
 </div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Documentation can be found here: http://getbootstrap.com/components/#responsive-embed.