Using twitter bootstrap, how to make an embedded video responsive?

Question

I am trying to make an embedded video responsive to window size change and compatible with mobile screens as well. Does anyone know which class to implement or how to make the v

Answer 1

The responsive embed component was added with the release of Bootstrap 3.2.0.

<!-- 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>

Answer 2

The easiest way for HTML5 video is to add class="img img-responsive" to video tag:

<video controls class="img img-responsive">

Answer 3

Check out the responsive-embedd.css located archive. apply the class .embed-responsive to your embed container or any of the other classes you wish.

Answer 4

Check out the "Responsive video CSS" - Source Code on github.

Here's a working demo on Bootply. Click Run and see it resize for different screen sizes.

<section class="row">
  <div class="span6">
    <div class="flex-video widescreen"><iframe src="https://www.linktoyourvideo.com/..." frameborder="0" allowfullscreen=""></iframe></div>
  </div>
  <div class="span6">
    ...
  </div>
</section>