How to make a YouTube carousel?

Question

YouTube

Good afternoon dear community.
The following problem occurred:
I created a video carousel using the Owl library:

var videoCarousel = $('.video-carousel');
videoCarousel.owlCarousel({
    items: 1,
    loop: true,
    dotsClass: "video-carousel-dots",
  video: true,
  autoplay:true,
    autoplayTimeout:5000,
    responsive: {
        0: {
            items: 1,
            stagePadding: 50
        },
        1200: {
            stagePadding: 150
        },
        1470: {
            items: 1,
            stagePadding: 270
        }
    }
});

It was also necessary to make the adjacent carousel elements translucent and smaller in size. I implemented it like this:

.video-carousel-item {
    box-shadow: 20px 28px 54px 0 rgba(0,0,0,0.24);
    overflow: hidden;
    opacity: .4;
    transition: .4s ease all;
    transform: scale(.8);
    width: 100%;
    cursor: pointer;
}

.active .video-carousel-item {
    opacity:1;
    transform:scale(1);
    width: 100%;
    cursor: auto;
}

On the left and right elements (whichever is smaller), when clicked, the carousel needs to move to the left or right, respectively.

videoCarousel.on('click', '.owl-item', function(e) {
    var carousel = videoCarousel.data('owl.carousel');
    e.preventDefault();
    carousel.to(carousel.relative($(this).index()));
});

If I use normal posts instead of videos, then everything works fine (the elements move), but if I try to insert a video, then when I click on the neighboring elements of the carousel, instead of moving this element to the center, the video starts playing (and does not move). Also, if you start the next video, they play together.
Accordingly, two questions appeared:
1. How to make it so that when clicking on the adjacent (to the left and right of the central element of the carousel) video elements do not start playing, but the element (which was clicked) becomes the central one?
2. How to make sure that only ONE video is played out of all that are on the page?
Thanks in advance for the replies.
PS: I did not find such a carousel plugin (I was looking for a very long time). I hope you understand what you need from the plugin, and if you advise a good one, I will be very happy and grateful to you.

Answer 1

In this situation, the following option comes to mind:
Make a transparent plate on the iframe with the video. This will prevent the video from starting on click. And remove this die in the active element.
As for playing only one video, I have no answer.