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 video responsive? Thanks.

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

Answer 4

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.