html - 英雄视频没有留在它的容器中

Question

我正在尝试制作一个带有文本覆盖的相当大的英雄视频，但它不适合容器并且只是覆盖了整个页面。它仍然落后于我的其他内容。

HTML：

<div class="intro">
            <video playsinline autoplay muted loop poster="placeholder.jpg" id="bgvideo" width="x" height="y">
                <source src="video/showreel.mp4" type="video/mp4">
            </video>
        </div>

CSS：

    display:block;
    position: fixed;
    width:100%;
    z-index: -100;
    overflow:hidden;
    padding-bottom:56.25%;
}

标签： htmlcss

Answer 1

尝试使用max-width: 100%;适合大视频而不是width:100%; 尝试使用该max-height:100%属性。