Question

设置视频尺寸比例的最大尺寸

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    max-width: 1024px;
    max-height: 576px;
}

.videoWrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 1024px;
    max-height: 576px;
}

和HTML代码

<div class="videoWrapper">
    <video  class="aspect-ratio-box" autoplay>
        <source src="../../../assets/original.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video> 
</div>

这里是结果：https://prnt.sc/s6y3no

宽度大小正确限制为1024px。问题是高度不受限制。不允许将段落放在视频下方。

他为什么不理会我的CSS规则？我该如何克服这个问题

感谢您的帮助

Answer 1

我找到了解决方法。

.video {
    object-fit: cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.video-frame {
    position: relative;
    padding-bottom: 56.25%;
    display: block;
    overflow: hidden;
}

.video-container {
    max-width: 1024px;
}

和HTML

<div class="video-container">
    <div class="video-frame">
        <video class="video" autoplay>
            <source src="../../../assets/original.mp4" type="video/mp4">
        Your browser does not support the video tag.
        </video> 
    </div>
</div>

将最大尺寸设置为视频尺寸比例

1 个答案: