title: Bootstrap carousel with responsive HTML5 videos?
body: <p>I'm trying to make a carousel with videos. With the images it works fine the image are responsive even in mobile view. But with videos the width is responsive but not the height. Basically I would like to achieve the same comportement with a carousel image but with a video. I've tried many tricks online but none is doing it. My video is 1024/552px</p>
  
  <p>Tried my best at a fiddle. You can see if you load the fiddle with a small width, it keeps the same height and it isn't responsive but the width of the carousel/video is (it crops the video on the sides though). It doesn't have the same comportement as an image. As you will see I have included an image in the second slide to further demonstrate my problem. </p>
  
  <p><a href="https://jsfiddle.net/687bsb21/1/" rel="noreferrer">https://jsfiddle.net/687bsb21/1/</a></p>
  
  <p>Here's the code :</p>
  
  <pre><code>&lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
   &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
    &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;/ol&gt;
  
        &lt;!-- Wrapper for slides --&gt;
        &lt;div class="carousel-inner" role="listbox"&gt;            
  
          &lt;div class="item active"&gt;
               &lt;div align="center"&gt;
                 &lt;video autoplay loop&gt;
                   &lt;source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" width="1024" height="552" type="video/mp4"&gt;
                   Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
               &lt;div class="carousel-caption"&gt;
                &lt;h3&gt;hello&lt;/h3&gt;
                &lt;p&gt;hello&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt; 
              &lt;div class="item"&gt;
            &lt;img src="http://dummyimage.com/1024x552/000/fff" class="img-responsive" alt="asfds"&gt;
            &lt;div class="carousel-caption"&gt;
                &lt;h3&gt;hello&lt;/h3&gt;
                &lt;p&gt;hello.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
            &lt;a class="left carousel-control" href="#carouselHelp" role="button" data-slide="prev"&gt;
          &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
        &lt;/a&gt;
        &lt;a class="right carousel-control" href="#carouselHelp" role="button" data-slide="next"&gt;
          &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Next&lt;/span&gt;
        &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks for helping.</p>