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

Question

我将视频实现为html项目的背景，但是页眉和页脚的右侧出现了一些空白。我在Google上搜索，并说必须在CSS的正文中添加“ margin：0”。我做到了，而且仍然继续。

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

我想在其他页面上提到我没有这个问题。在实施完该视频后，仅在这一段上。

name    sport       time
John   soccer        41
Mary   basketball    5
Anna   tennis        61 
Mary   soccer        12
Anna   badminton     18
John   basketball    99

.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;
}

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>