Swiper wrapper height doesn't fit child element (video) on start

Hey great people from SO! I hope you all have a good day

*sorry in advance if my english grammar is not good

I use Swiper/Vue and Tailwindcss to create a gallery slider for my simple web app

<!-- HTML Markup -->
...
...
...
<swiper
    v-if="videoPreview.length"
    :auto-height="true"
    :auto-play="false"
    :enabled="true"
    :observer="true"
    :observe-parents="true"
    :observe-slide-children="true"
    :slides-per-view="1"
    @slideChange="swiperSlideChange($event.activeIndex)"
>
    <swiper-slide v-slot="{ isActive }" v-for="(video, videoIndex) in videoPreview" :key="videoIndex" class="relative">
        <video :tabindex="isActive ? '0' : '-1'" :src="video.src" :height="video.originalHeight" :width="video.originalWidth" :poster="video.poster" controls controlsList="nofullscreen" disablePictureInPicture muted preload="metadata" loop></video>
        <button @click="removeSlide(videoIndex)" :tabindex="isActive ? '0' : '-1'" style="right: 1.5%; top: 2.5%" type="button" class="absolute bg-gray-300 h-9 rounded-full text-xl w-9">
            <i aria-hidden="true" class="mdi mdi-close"></i>
        </button>
    </swiper-slide>
</swiper>
...
...
...

After I use URL.createObjectUrl() to create previews of selected videos, the video loads normally.

But I noticed something that really bothered me, the height of the <swiper-wrapper></swiper-wrapper> doesn't match the entire height of the video element

While the video element height is 380px, the swiper wrapper height is 288px, if only the window is resized or changing slides, <swiper-wrapper></swiper-wrapper> will follow the height of the video element.

Things I tried:

• Changing classes on video element, including the swiper-wrapper element
• Adding the width property and height property on video element
• Creating video poster with height="x" and width="x" with value precisely with video.videoHeight and video.videoWidth, yet still not working

I knew that I could easily swap the element like load the poster first with <img :src="video.poster"/> tag, then when the video element is ready, then hide the <img :src="video.poster"/>

But is there any other solution?

from Swiper wrapper height doesn't fit child element (video) on start