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

Question

我将我的视频作为html项目的背景实现，但是页眉和页脚的右侧出现了一些边距。我搜索谷歌，它说我必须在我的身体CSS中添加“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>