Video controls are hidden behind input feature?

Question

I used this to generate a slideshow. Instead of putting the pictures as background-images, I put them as images in the html inside the div tags, which works very well.

  <input type="radio" id="trigger3" name="slider">
<label for="trigger3"><span class="sr-only">Slide 3</span></label>
<div class="slide bg3">
    <img src="/images/slide-6.png">
</div>

Now I would also like to include a video. When I insert it as follows:

 <input type="radio" id="trigger4" name="slider">
<label for="trigger4"><span class="sr-only">Slide 4</span></label>
<div class="slide bg4">
    <video width="320" height="240" controls>
        <source src="/images/1.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
</div>

the video shows up, but the controls do not react. I can put the input feature behind the video controls by changing the z-order atttribute

.slide {... ; z-index: 200; ...}

but then the input feature (back and forward buttons) is hidden behind the slide element. Could I limit the extension of input element (for example to the actual button symbols) and then put them back on top? Or the other way round, limit the area of the slides.