I've been working on creating a carousel that includes videos. When it comes to images, everything works smoothly as they are responsive even in mobile view. However, I'm encountering an issue with videos where the width is responsive but the height is not. Essentially, I am looking for a way to make the video carousel behave just like the image carousel. I have tried various online tricks without success. The dimensions of my video are 1024/552px.
I attempted to create a fiddle to demonstrate the problem. If you load the fiddle with a small width, you'll notice that the height remains constant and unresponsive while the width adjusts correctly (although it crops the video on the sides). This behavior is not consistent with that of an image carousel. In order to illustrate the issue further, I included an image in the second slide.
https://jsfiddle.net/687bsb21/1/
Below is the code:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div align="center">
<video autoplay loop>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" width="1024" height="552" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div class="carousel-caption">
<h3>hello</h3>
<p>hello</p>
</div>
</div>
<div class="item">
<img src="http://dummyimage.com/1024x552/000/fff" class="img-responsive" alt="asfds">
<div class="carousel-caption">
<h3>hello</h3>
<p>hello.</p>
</div>
</div>
<a class="left carousel-control" href="#carouselHelp" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselHelp" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Your assistance in solving this issue would be greatly appreciated.