Css 如何实现类似于scabal.com中所示的全屏列效果？

我试图在引导中创建两列，高度为100%，宽度为50%，其中左列将播放视频，视频应响应该列

在scabal.com，如果你向下滚动，你可以看到类似的效果，我正在寻找

我如何做到这一点？ 我尝试了很多事情，但都没有成功。我给了h-100、列和行的截面100%的高度，但没有达到预期的结果。我设法在我的左栏col-lg-6中保留了一段视频，但视频没有响应，无法缩放到100%的高度

请帮忙

代码如下所示

<section id="product-types-women" class="h-100">
    <div class="container-fluid">
        <div class="row">


            <div class="col-lg-6" data-aos="fade-left">

                       <div class="video-wrapper">
                        <video poster="poster.png" autoplay="true" loop class="h-100">
                            <source src="Assets/videos/hero.mp4" type="video/mp4">
                            <source src="Assets/videos/hero.webm" type="video/webm">
                        </video>
                    </div>

            </div>

            <div class="col-lg-6">
                <h1 class="text-center">Designer Boutique For Women</h1>
                <p class="lead text-center">Your own personalized boutique at your doorstep, Call our expert designer home for all your tailoring needs.</p>
                <a href="#" class="btn btn-lg btn-primary">Click Here</a>
            </div>

        </div><!--row-->
    </div><!--container fluid-->
</section><!--product types women-->

我只是想把视频放在左列，将其高度增加到100%，并像右边的文本一样覆盖它

---

寻找回应。非常感谢。

用一个名为-object-fit:fill的简单属性修复了它；在视频里。 CSS如下所示：

#product-types-women .col-lg-6{
padding: 0;
flex-basis: 100%;
text-align: center;
height: 100vh;
}

#product-types-women .col-lg-6 video{
width: 100%;
display: block;
height: 100%;
object-fit: fill;
}

最终结果：

---

谢谢大家。

您检查过他们的代码吗？顺便说一句，亲爱的上帝，scabal.com的用户体验很糟糕。是的，我这么做了，但因为他们的代码不在引导程序中，我无法理解他们的CSS。我别无选择。

#product-types-women .col-lg-6{
padding: 0;
flex-basis: 100%;
text-align: center;
height: 100vh;
}

#product-types-women .col-lg-6 video{
width: 100%;
display: block;
height: 100%;
object-fit: fill;
}