下一个和上一个控件的自定义Bootstrap视频轮播错误会阻止对轮播视频的视频控件

Question

我正在尝试修复视频轮播中的错误。下一个和上一个箭头控件从顶部延伸到底部。问题在于它们涵盖了视频播放器本身的控件。

    .carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 15%;
  flex-basis:   20%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.15s ease; }
  @media (prefers-reduced-motion: reduce) {
    .carousel-control-prev,
    .carousel-control-next {
      transition: none; } }
  .carousel-control-prev:hover, .carousel-control-prev:focus,
  .carousel-control-next:hover,
  .carousel-control-next:focus {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: 0.9; }

.carousel-control-prev {
  left: 0; }

.carousel-control-next {
  right: 0; }

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat 50% / 50% 50%; }

这在其他CSS部分中：

.wpforms-field-container textarea {
    resize:none;
}

.site-info a {
    color:#555;
}

@media screen and (max-width: 991px) {
    .slick-track {
        max-height: calc(100vw / 2);
    }
    .slick-arrow {  
        width: 50% !important;
    }
    .carousel-control-prev {
        justify-content:flex-start !important;
    }
    .carousel-control-next {
        justify-content:flex-end !important;
    }
    
    .slick-arrow img {  
        height: 35px !important;
        max-width: none;
    }
}

以下是操作中的滑块的链接：

http://jamesautery.com/projects/music-videos/

我是新来的，所以如果我遗漏了任何关键信息，请告诉我。