css - 实现视频背景后如何删除页脚和页眉的边距？

Question

我将我的视频作为我的 html 元素的背景实现，但页眉和页脚的右侧出现了一些边距。我在谷歌上搜索，它说我必须在 CSS 中的 Body 上加上“margin: 0”。我做到了，它还在继续。

图片链接 - 您可以在标题的右上角看到它。

我想提一下，在我的其他页面上我没有遇到这个问题。只有在这个视频上，在我实现了那个视频之后。

.homepage_bg_video-container{
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    background-color: black;
}

.homepage_bg_video-container video{
    opacity: 0.4;
    position: absolute;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#rights{
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-color: rgba(13, 13, 13, 0.9);
    height: 60px;
    padding-top: 1px;
    color: #ece5ea;
    border-top: #070606 1px solid;
}

<div class="homepage_bg_video-container">
    <video autoplay loop muted>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>

</div>

<footer>
    <div id="rights">
        <p>Nits.SRL - Toate drepturile rezervate &copy; 2019</p>
    </div>
</footer>

Answer 1

您可以使用 object-position 属性调整视频在元素框架内的位置，并使用 object-fit 属性控制如何调整视频大小以适应框架:

video { object-fit: fill; } 

希望能解决。在这里阅读更多:https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

编辑

试试这个:

    body {margin: 0;}
    .homepage_bg_video-container {
        position: relative;
        max-height: 100vh;
        max-width: 100vw;
        overflow: hidden;    
        background-color: black;
    }
    video { 
    	height: calc(100% - 62px); 
    	width: 100%;
    	object-fit: fill; 
        opacity: 0.4;
    }
    #rights {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        background-color: rgba(13, 13, 13, 0.9);
        height: 60px;
        padding-top: 1px;
        color: #ece5ea;
        border-top: #070606 1px solid;
    }

    <div class="homepage_bg_video-container">
        <video autoplay loop muted>
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video>
    </div>
    
    <footer>
        <div id="rights">
            <p>Nits.SRL - Toate drepturile rezervate &copy; 2019</p>
        </div>
    </footer>