Absolutely positioned element won't show over other element - html

Question

Im trying to make the div element 'tiktok-webapp-mobile-player-container' show over the div element 'video card' but I can't get it to do so. Both divs are inside a parent container with position:relative.
Im using swiperjs library with video thumbnail inside each slide. When user begins swiping up the thumbnail is set to display: none and the video element should be visible as it is absolutely positioned and should show over all other elements in the parent container.
HTML
<div class="jeg_viewport">
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<div class="jeg_main">
<div class="jeg_container">
<div id="video-card" style="/* position: relative; */">
<div class="swiper mySwiper swiper-initialized swiper-vertical swiper-ios">
<div class="swiper-wrapper" id="swiper-wrapper-1d8f101a772932878" aria-live="polite" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide swiper-slide-active" style="height: 896px;" role="group" aria-label="1 / 11">
<div height="100%" class="slide-container">
<img
class="video-img"
src=" "
width="414"
height="896"
data-pin-no-hover="true"
style="display: none;"
/>
</div>
</div>
<div class="swiper-slide swiper-slide-next" style="height: 896px;" role="group" aria-label="2 / 11">
<div height="100%" class="slide-container"><img class="video-img" src="" data-pin-no-hover="true" /></div>
</div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>
</div>
<div id="tiktok-webapp-mobile-player-container" height="100%" class="">
<div style="width: 100%; height: 100%;">
<video
autoplay=""
playsinline=""
preload="auto"
id="vidplayer"
style="width: 100%; height: 100%; object-fit: cover; z-index: 3; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;"
src="https://questimesja.com/wp-content/uploads/2023/01/Snaptik.app_7174034252663737606.mp4"
></video>
</div>
<div class="blur-background" style="background-image: url();"></div>
</div>
</div>
</div>
</div>
CSS
.jeg_share_top_container{display:none;} .entry-header{display:none;}
html, body {
position: relative;
height: 100%;
}
#vidplayer{ }
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;color: #000;margin: 0;padding: 0;
}
.jeg_content{padding:0:}
.jeg_main{padding:0;position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;}
.jeg_featured .featured_image{display:none;}
.entry-content{ margin: 0!important;}
.jeg_container{position:relative;max-height: calc(100% - 49px);}
.swiper {width: 100%;height: 100vh!important;z-index:4;}
.swiper-slide {
text-align: center;font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
#tiktok-webapp-mobile-player-container video {
display:block;
}
#tiktok-webapp-mobile-player-container{
width: 100vw;
top: 0;
opacity: 1;
position: absolute;
height: 100%;
pointer-events:none;
}
.slide-container{width:100%;position:relative;height:100%;}
.video-img{width: 100%;
height: 100%;
object-fit: cover; }
#video-card{ width:100%; height:100%;}
#footer{display:none;}