Гибкий слайдер с видео (прямоугольный)

<style>
.stage .tn-atom {
height:100%;
display:flex;
flex-direction:row;
align-items:stretch;
position:absolute;
}
.option {
display: flex;
position:relative;
cursor:default;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95) !important;
width:100%;
overflow:hidden;
background-size: cover;
background-position: top center;
user-select:none;
flex-direction: row;
justify-content: center;
}

.option:before {
content: "";
position: absolute;
z-index: 20;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 15, 15, 0.65);
z-index:1;
pointer-events:all;
cursor:pointer;
}

.option.active:before {
background: rgba(15, 15, 15, 0);
pointer-events:none;
}

.option.active {
flex:6;
transform: scale(1);
cursor:default;
}
.option.active a{
cursor:pointer;
}

.option:not(.active) {
flex:1;
}
.option .label {
position:absolute;
left:20px;
bottom:20px;
width:30%;
z-index: inherit;
font-family:'Inter';
font-weight: 400;
opacity:0;
}
.option h2 {
font-size: 30px;
transform: translate(0px, -250%) rotate(-90deg);
position: absolute;
bottom: 15%;
color:#fff;
font-family:'Inter';
font-weight: 400;
user-select:none;
min-width: 350px;
text-align: start;
z-index:3;
}
.option.active h2 {

opacity:0;
}
.option h2 {
opacity:1;
}
.option.active .label{
display: grid;
grid-auto-flow: row;
grid-template-rows: min-content;
grid-gap: 10px;
opacity:1;
transition:opacity 0.5s ease;
transition-delay:0.5s;
}
.option .label .icon{
width:30px;
height:30px;
background-size:cover;
backgriund-repeat:no-repeat;
}
.option .label .info {
opacity:0;
}
.option.active .label .info {
color:#fff;
opacity:1;
display: grid;
grid-gap: 15px;
}
.option.active .label .info .main{
font-size:40px;
font-family:'Inter';
font-weight: 400;
}


.option video {
width: 100%;
height: 100%;
opacity:0.6;
background: rgba(15, 15, 15, 0);
object-fit: cover;
z-index: 0;
display: none; /* Скрываем видео по умолчанию */
}

.option.active video {
display: block; /* Показываем видео только на активном слайде */
}

.option .background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 0;
transition: opacity 0.5s ease;
}

.option.active .background-image {
opacity: 0; /* Скрываем картинку при активации слайда */
}

.label {
position: absolute;
z-index: 3;
color: #fff;
bottom: 10%;
left: 5%;
}

.label h2 {
font-size: 2rem;
margin: 0 0 10px;
}

.label .info .main {
font-size: 1.5rem;
font-weight: bold;
}

.label .info .sub {
font-size: 1rem;
margin-top: 10px;
}

.label .info .icon {
width: 50px;
height: 50px;
margin-top: 10px;
background-size: contain;
background-repeat: no-repeat;
}
@media screen and (max-width:480px){
.stage .tn-atom {
flex-direction: column;
justify-content: center;
display: flex;
}
.option .label{
width:100%;
}
.option h2, .main{
font-size:14px!important;
}
h2 {
transform: translate(0px, 0%) rotate(0deg)!important;
text-align: center!important;
}
.option .sub{
max-width:90%;
font-size: 12px;
}

.option .label {
left:5px;
bottom:10%;
}
}
</style>

<script>
var cardData = [
{
videoUrl: 'https://kinescope.io/fRuahqXwjQYQXXQ6M8YrsP/720p', //видео
imageBg: 'https://static.tildacdn.com/tild3232-3738-4262-b765-323232396362/__2024-10-18__150446.png', //фон
imageUrl: 'https://static.tildacdn.com/tild3366-3230-4434-b361-306462653666/Group_21754.svg',//иконка
title: 'Co-working Space',
description: 'There is a convenient coworking space within a 5-minute drive',
link:'#popup1'
},
{
videoUrl: 'https://kinescope.io/jUAEuHEPCdtU4MsVLZy27A/720p',
imageBg: 'https://static.tildacdn.com/tild3365-3833-4262-b062-373762383035/__2024-10-18__150504.png',
imageUrl: 'https://static.tildacdn.com/tild3366-3230-4434-b361-306462653666/Group_21754.svg',
title: 'Real Estate',
description: 'There is a convenient coworking space within a 5-minute drive',
link:'#popup2'
},
{
videoUrl: 'https://kinescope.io/mfn53Pqy42FgSaaDWHVm93/720p',
imageBg: 'https://static.tildacdn.com/tild3737-3439-4930-a532-383833373462/__2024-10-18__150520.png',
imageUrl: 'https://static.tildacdn.com/tild3366-3230-4434-b361-306462653666/Group_21754.svg',
title: 'Free parking',
description: 'There is a convenient coworking space within a 5-minute drive',
link:'#popup3'
}
];

$(function(){
var stage = $('.stage .tn-atom');
var num = cardData.length;

for (var i = 0; i < num; i++) {
var option = $('<div class="option">');

// Создаем видеоэлемент
var video = $('<video muted loop playsinline>');
video.attr('src', cardData[i].videoUrl);

// Добавляем фоновое изображение
var backgroundImage = $('<div class="background-image">');
backgroundImage.css('background-image', 'url(' + cardData[i].imageBg + ')');

option.append(video); // Добавляем видео в слайд
option.append(backgroundImage); // Добавляем фоновое изображение
stage.append(option); // Добавляем слайд в контейнер
}

$(".option").click(function(){
$(".option").removeClass("active");
$(this).addClass("active");

// Останавливаем все видео
$('video').each(function() {
$(this)[0].pause();
});

// Запускаем активное видео
$(this).find('video')[0].play();
});

$('.option').each(function(index, elem){
var labelElement = $('<div class="label">');
var h2 = $('<h2>' + cardData[index].title + '</h2>');

labelElement.html(
'<div class="info">' +
'<div class="main">' + cardData[index].title + '</div>' +
'<div class="sub">' + cardData[index].description + '</div>' +
'<a href="' + cardData[index].link + '"><div class="icon" style="background-image: url(' + cardData[index].imageUrl + ');"></div></a>' +
'</div>'
);

$(elem).append(h2);
$(elem).append(labelElement);
});

// При загрузке, активируем первый слайд и показываем картинку
$(".option").first().addClass("active").find('video')[0].play();
});

</script>