I've been trying to make a video carousel with Bootstrap 5 and an issue that I'm trying to resolve is removing the white background that pops up when I hover over the arrow. Normally, it shouldn't have a background, but for some reason, it does.
click to enlarge
Code Snippet
.heading2 {
font-size: 30px;
text-align: center;
font-family: 'Poppins', sans-serif;
}
.carousel-inner {
width: 100%;
height: auto;
}<div class="heading2">
<h3>Film/Video Editing Projects</h3>
<!-- Carousel wrapper -->
<div id="carouselVideoExample" class="carousel slide carousel-fade" data-bs-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselVideoExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselVideoExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselVideoExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<!-- Inner -->
<div class="carousel-inner">
<!-- Single item -->
<div class="carousel-item active">
<video controls class="d-block w-100">
<source src="https://placehold.co/3840x2160/blue/white.mp4?text=video 1" type="video/mp4" />
</video>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.
</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<video controls class="d-block w-100">
<source src="https://placehold.co/3840x2160/black/white.mp4?text=video+2" type="video/mp4" />
</video>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<video controls class="d-block w-100">
<source src="https://placehold.co/3840x2160/green/white.mp4?text=video+3" type="video/mp4" />
</video>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
</div>
</div>
</div>
<!-- Inner -->
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselVideoExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselVideoExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Carousel wrapper -->`
<!-- Bootstrap 5.3 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
Two separate CDNs, one with version 5.0.2 and the other with version 5.3.2, are the sources of the two inclusions of Bootstrap. Utilizing a single version is preferable to avoid such conflicts. In this scenario, 5.3.2 is the most recent version I advise utilizing. Here is the solution :-