HTML5 VIdeo Controls visibility / z-index - html

Question

Hello I have a Carousel in bootstrap with a video in it
The main problem I can't fix is that video controls cannot be clicked because of the carousel indicators.
I tried to add some margin and padding to them and it worked for the begging and the end of the video (where the two coincide, but then in the middle of the seeking bar I can't click without any reason). If I didn't explain me please let me know.
I couldn't add any snippet but you can see what I am trying to explain on my site: 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();
});
});

Answer 1

You can use
.carousel-indicators {
pointer-events: none;
}
.carousel-indicators > li {
pointer-events: auto;
}
to remove the interactivity of the carousel indicators.