Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap carousel with responsive HTML5 videos?

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

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.

https://jsfiddle.net/687bsb21/1/

Here's 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>

Thanks for helping.

like image 623
Paperbag Writer Avatar asked Mar 19 '15 12:03

Paperbag Writer


People also ask

Can we add video in carousel?

You can create video carousel ads in Ads Manager, Power Editor or the marketing API.

Why is Bootstrap carousel not sliding?

In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).

Is Bootstrap carousel good?

Carousel V04 is a great Bootstrap 4 carousel that helps you add client feedback to your website. Whether it's for products, services, apps, you name it, Carousel V04 works for ALL OF IT. The design is minimal, so adding it to different site themes and branding regulations will breeze.


1 Answers

add your css,

video{
width:100%
}
like image 80
USER10 Avatar answered Sep 29 '22 22:09

USER10