I am attempting to create a bootstrap carousel featuring videos within a jumbotron. Despite my best efforts, I am struggling to make it work correctly. The videos appear too small within the jumbotron and seem to be overlaid by other elements. I have experimented with CSS adjustments to no avail in trying to enlarge the videos to occupy the entire space of the jumbotron as I intend for them to serve as the background.
My current HTML setup is as follows:
<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 -->
In regards to my CSS settings:
.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;
}
However, the actual result is far from my desired outcome. The video carousel only displays as a small line, rather than occupying the full area of the jumbotron as shown in this image: https://i.sstatic.net/FzahE.png
If anyone has any insights on how I can resolve this issue, I would greatly appreciate your help!