<div class="owl-carousel owl-theme">
    <div class="item">
        <video style="object-fit: cover; background-size: cover" preload="auto" playsinline autoplay loop muted>
            <source src="https://baikal-old.postnews.ru/28d621d32b2acf7ac63341f183c1cee8.mp4" type="video/mp4">
        </video>
    </div>
    <div class="item">
        <video style="object-fit: cover; background-size: cover" preload="auto" playsinline autoplay loop muted>
            <source src="https://baikal-old.postnews.ru/28d621d32b2acf7ac63341f183c1cee8.mp4" type="video/mp4">
        </video>
    </div>
    <div class="item">
        <video style="object-fit: cover; background-size: cover" preload="auto" playsinline autoplay loop muted>
            <source src="https://baikal-old.postnews.ru/28d621d32b2acf7ac63341f183c1cee8.mp4" type="video/mp4">
        </video>
    </div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
    $('.owl-carousel').owlCarousel({
    loop:true,
    nav:false,
    responsive:{
        0:{
            items:1,
            margin:20
        },
        600:{
            items:1,
            margin:20
        },
        1000:{
            items:1,
            margin:40
        }
    }
});
	var owl=$(".owl-carousel");
	owl.owlCarousel();
	$(".next").click(function(){
		owl.trigger("next.owl.carousel");
	});
	$(".prev").click(function(){
		owl.trigger("prev.owl.carousel");
	});

</script>
<style>
    .owl-carousel .item {
        height: 600px;/*высота видео десктоп*/
    }
    @media screen and (max-width: 1200px) {
        .owl-carousel .item {
            height: 500px;/*высота видео планшет большой*/
        }
    }
    @media screen and (max-width: 960px) {
        .owl-carousel .item {
            height: 300px;/*высота видео планшет мелкий*/
        }
    }
    @media screen and (max-width: 640px) {
        .owl-carousel .item {
            height: 250px;/*высота видео планшет очень мелкий или 5s горизонтально*/
        }
    }
    @media screen and (max-width: 480px) {
        .owl-carousel .item {
            height: 150px;/*высота видео телефоны*/
        }
    }
    .v-sl {
        overflow: hidden;
        display: flex;
    }
    .next, .prev {
        cursor:pointer;
    }
    .owl-carousel .item {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .owl-carousel .item video {
        object-fit: cover;
        background-size: cover;
        display: flex;
        width: 100%;
        height: 100%;
        position: absolute;
    }
</style>
Made on
Tilda