Hello, I am facing an issue with a Bootstrap carousel that contains a video. The main problem is that the video controls cannot be clicked due to the carousel indicators overlaying them. I have tried adding margin and padding to the indicators, which worked at the beginning and end of the video, but there is still an area in the middle where clicking doesn't register for some reason. If my explanation is unclear, please let me know. I am unable to provide a code snippet here, but you can view the issue on my website: Here
HTML:
<div id="carousel-home" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carousel-home" data-slide-to="0" class="active"></li>
<li data-target="#carousel-home" data-slide-to="1" id="slide_1"></li>
<li data-target="#carousel-home" data-slide-to="2" id="slide_2"></li>
<li data-target="#carousel-home" data-slide-to="3" id="slide_3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<video id="myvideo" class="crop" poster="imgs/video_thumb.jpg" preload="auto" playsinline controls>
<source src="vid/video_2019.mp4" type="video/mp4" onclick="this.play();">
</video>
</div>
<div class="carousel-item">
<img class="d-block w-100 mx-auto" src="imgs/slider/1.png" alt="First slide">
<div class="carousel-caption">
<h2 class="title" style="text-shadow: 1px 1px black">First</h2>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 mx-auto" src="imgs/slider/2.png" alt="Second slide">
<div class="carousel-caption">
<h2 class="title" style="text-shadow: 1px 1px black">Second</h2>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 mx-auto" src="imgs/slider/3.png" alt="Third slide">
<div class="carousel-caption">
<h2 class="title" style="text-shadow: 1px 1px black">Third</h2>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-home" role="button" data-slide="prev" id="carousel_l">
<i class="fa fa-chevron-left"></i>
<span class="sr-only">Back</span>
</a>
<a class="carousel-control-next" href="#carousel-home" role="button" data-slide="next" id="carousel_r">
<i class="fa fa-chevron-right"></i>
<span class="sr-only">Next</span>
</a>
</div>
CSS:
.carousel-indicators li {
margin-bottom: 2rem;
padding-bottom: 1rem;
padding-top: 1rem;
border-radius: 100%;
}
.carousel-item img {
object-fit: cover
}
.carousel-item {
overflow:hidden;
}
JQuery:
$(window).ready(function() {
$('#carousel_l').on("click", function() {
$('#myvideo').get(0).pause();
});
$('#carousel_r').on("click", function () {
$('#myvideo').get(0).pause();
});
$('#slide_1').on("click", function () {
$('#myvideo').get(0).pause();
});
$('#slide_2').on("click", function () {
$('#myvideo').get(0).pause();
});
$('#slide_3').on("click", function () {
$('#myvideo').get(0).pause();
});
});