CODEWITHSUNDEEP
jquerycsshtmltwitter-bootstrapvideo
sardine
sardine

Reputation: 157

Bootstrap Carousel with Videos in a Jumbotron

I want to have a bootstrap carousel with videos in a jumbotron. Actually I should know how to do this but i just can't get it to work correctly! The videos are there but i only see a little of them, other things seem to overlay them. I tried to experiment with css but nothing worked to enlarge the videos to the size of the jumbotron (i want them to be like the background of the jumbotron).

My html setup is the following:

<body>
    <div class="jumbotron">
        <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">
            <div class="item active">
                <div class="container">
                    <div class="flex-video widescreen" style="margin: 0 auto;text-align:center;">2
                        <video id="video-background" preload muted autoplay loop>
                            <source src="images/cerb1.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="container">
                    <div class="flex-video widescreen" style="margin: 0 auto;text-align:center;">3
                        <video id="video-background" preload muted autoplay loop>
                            <source src="images/cerbkaff.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="container">
                    <div class="flex-video widescreen" style="margin: 0 auto;text-align:center;">4
                        <video id="video-background" preload muted autoplay loop>
                            <source src="images/cerbkaff2.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
             </div>
             </div> <!-- carousel-inner -->
            <a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
            <a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
        </div>

        <div class="container-fluid">
            <h2><b>BLA: BLALBLA BLA BLA TEST</h2>
        </div>
    </div> <!-- end jumbotron -->

My CSS Setup:

.jumbotron {
    background-color: rgba(255, 255, 255, 0.075);
    position: relative;
    overflow: hidden;
    height: 400px;
}

.jumbotron .container-fluid {
  position: relative;
  color: #ffffff;
  z-index: 2;
}

#video-background { 
  position: absolute;
  height: auto;
  width: auto;
  min-height: 100%;
  min-width: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  z-index: 9999;
}

That's how it faultily looks. The carousel videos are only visible as a little line, whereas they should take the space of the whole lighter area (jumbotron area) That's how it faultily looks. The carousel videos are only visible as a little line..

Does someone know how I can look through this mess?

Upvotes: 0

Views: 1469

Answers (1)

Morphasis
Morphasis

Reputation: 1433

The absolute positioning of the video background is what is breaking it. Remove the:

position: absolute;

On the "video-background" class and all should be well.

plnkr: https://plnkr.co/edit/63xDn8EaGB3qDLSmtrx4?p=preview

Upvotes: 1

Related Questions