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?

score 78 · Accepted Answer · answered Sep 02 '12 at 11:35

78

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>

answered Sep 02 '12 at 11:35

Bart Naus

798
5
5

Thanks Bart! Works like a charm in a responsive WP blog. – Giulio Prisco Jan 13 '13 at 11:44
1

For this script did not work, but this jQuery plugin did the job for me: https://github.com/marclarr/FitVids.js – Michael Osl Apr 22 '13 at 18:50
Man, this worked very well. I would love to see this built into bootstrap as a default. – alexander7567 Oct 30 '13 at 20:25
I've added an answer that provides a simple Javascript snippet that automatically adds the code stated by @Bart. See http://stackoverflow.com/a/20585329/955619 – Caumons Dec 14 '13 at 16:05

Pamela Cook - LightBe Corp · Answer 2 · 2013-05-25T21:17:30.737

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

Whilst this may theoretically answer the question, [it would be preferable](http://meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. — Matt, May 25 '13 at 21:03

score 3 · Answer 3 · answered Sep 11 '14 at 15:18

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"

score 1 · Answer 4 · answered Aug 28 '12 at 21:01

1

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

answered Aug 28 '12 at 21:01

neon

2,811
6
30
44

score 1 · Answer 5 · edited May 23 '17 at 11:45

1

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>');
  });
});

edited May 23 '17 at 11:45

Community

1
1

answered Dec 14 '13 at 16:03

Caumons

9,341
14
68
82

score 1 · Answer 6 · answered Aug 03 '16 at 11:54

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.

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

6 Answers6

Linked