如何使视频适合并保持在透明背景下？

Question

我有透明椭圆形的 .PNG 背景图像，我想将视频放在椭圆形下。我用了z-index放在下面，但是我不知道在做响应式设计的时候，如何让视频和透明部分一样大，不溢出或者视频变小。

这是我的 HTML 代码：

<div class="section9 sm:pt-8 lg:grid lg:grid-rows-1 lg:grid-cols-2">
            <video class="video" width="920" height="840" loop="true" autoplay="autoplay" controls="false" id="vid" muted>
                <source src="../img/short-video-to-put-to-case-study-html.mp4" class="videopl" type="video/mp4">
            </video>
        <div class="section9-content space-y-2 lg:space-y-6 sm:text-center sm:top-3/4 lg:row-span-1 lg:col-start-2 lg:col-end-3 lg:place-self-center">
            <h1 class="font-black text-2xl lg:text-6xl wow animate__animated animate__bounce"><span class="lg:block"></span></h1>
            <p class="text-sm section9-text"></p>
        </div>
    </div>

这里是 CSS 代码：

    .section9 {
    background: url("../img/section9.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
    position: relative;
    height: 800px;
}

.video {
    left: -80px;
    top: 130px;
    position: absolute;
    z-index: -1;
    cursor: default;
}

video::-webkit-media-controls-panel {
    display: none !important;
    opacity: 1 !important;
}

.section9-content {
    font-family: 'GalanoGrotesque-Regular';
    color: var(--grassGreen);
}

.section9-text {
    color: var(--gray);
}

Answer 1

尝试将图像和视频组件都放在包装器（父级 div）中，使它们的位置绝对化，宽度和高度为 100%，视频的 z-index 低于图像。

position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;

然后你可以调整包装器组件的大小，它们应该一起调整。

如果您希望您的视频处于 cover 模式，您可以给它 object-fit: cover; 属性

如何使视频适合并保持在透明背景下？

How to fit and keep video below transparent background?

html

css

video