Bootstrap Carousel with Videos in a Jumbotron
<p>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).</p>

<p>My html setup is the following:</p>

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

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

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

        &lt;div class="container-fluid"&gt;
            &lt;h2&gt;&lt;b&gt;BLA: BLALBLA BLA BLA TEST&lt;/h2&gt;
        &lt;/div&gt;
    &lt;/div&gt; &lt;!-- end jumbotron --&gt;
</code></pre>

<p>My CSS Setup:</p>

<pre><code>.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;
}
</code></pre>

<p>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) 
<a href="https://i.stack.imgur.com/FzahE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FzahE.png" alt="That&#39;s how it faultily looks. The carousel videos are only visible as a little line.."></a></p>

<p>Does someone know how I can look through this mess?</p>