HTML 视频覆盖 100% div

Question

我有一个 HTML 视频，我想将其用作全屏背景图像的替代品，但目前它溢出并覆盖了整个页面，而不仅仅是 [=25= 的限制].

html:

 <header id="masthead" class="site-header" role="banner">
        <video autoplay loop poster="<?php bloginfo('stylesheet_directory'); ?>/img/main.jpg" id="bgvid">
            <source src="<?php bloginfo('stylesheet_directory'); ?>/vid/dumbells.webm" type="video/webm">
            <source src="<?php bloginfo('stylesheet_directory'); ?>/vid/dumbells.mp4" type="video/mp4">
        </video>
    </header>

css:

     video#bgvid {
        position: fixed;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -100;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        background: url(img/main.jpg) no-repeat;
        background-size: cover;
    }

    .site-header {
        left: 0px;
        top:0px;
        z-index: 1;
        float: none;
        width: 100%;
        height: 100%;
        overflow:hidden;
        text-align:center;
        padding: 130px 0 141px;
    }

有谁知道我必须做什么才能让它填满我的 header 容器的大小？有几个关于类似主题的问题，但 none 似乎回答了我的具体查询。

Answer 1

应用

position:relative

到您的 .site-header class

HTML 视频覆盖 100% div

HTML video to cover 100% div

html

css

html5-video