Как удалить поля нижнего колонтитула и верхнего колонтитула после реализованного видео фона?

Question

Я реализовал свое видео в качестве фона для моего html-проекта, но в правой части верхнего и нижнего колонтитулов появились некоторые поля.Я искал в Google, и он сказал, что я должен положить "margin: 0" на моем теле в CSS.Я сделал это, и это все еще продолжается.

Ссылка на изображение - вы можете увидеть его в правом верхнем углу заголовка.

Я хочу упомянуть об этом на моемдругие страницы у меня нет этой проблемы.Только на этом, после того, как я реализовал это видео.

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