I am trying to embed a Youtube video to a block using Bootstraps .embed-responsive-item class. The Text Format is set to Full HTML.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen=""></iframe>

It’s working just fine on my static html version. However within Drupal the video canvas doesn’t use the full block dimension? What’s the correct way to embed full-size Youtube videos in a Drupal Bootstrap subtheme?

  • Thanks. This is a nice workaround. It seems like that embed-responsive isn't supported in Drupal Bootstrap subthemes? – howdytom Feb 18 '15 at 16:47
  • I'm not really familiar with Drupal's Bootstrap theme but I guess not - I think with Bootstrap 3 you can add img img-responsive as a class to videos as well to make them responsive, but I'm not certain – Clive Feb 18 '15 at 17:11

This might help:


The essential bit:

You will need to wrap the responsive youtube embed code with a and specify a 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. This will force the embed elements to expand fullwidth automatically.


Here’s my solution: I was using an outdated CDN version for Bootstrap before 3.2.x. Make sure that you're using at least Bootstrap 3.2.0 or higher (http://blog.getbootstrap.com/2014/06/26/bootstrap-3-2-0-released

Thus I wasn’t able to use .embed-responsive-item class in my template files. Anyway, Thank you for support and quick workaround!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.