Что не так с позиционированием фонового видеослоя?

Question

Пробовал сделать меню веб-сайта с тремя полноэкранными background overlays, но фоновое видео (основное) в этом меню смещено вниз. Что не так с позиционирующей разметкой?

CSS:

.videoContainer { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    //padding: 20px; 
    border-radius: 1px; 
    overflow: hidden; 
} 
.videoContainer video { 
    min-width: 100%; 
    min-height: 100%; 
    position: relative; 
    z-index: -5; 
} 
.videoContainer .overlay-vid-1 { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: -1; 
    background: black; 
    opacity: 0.5; 
} 

P.S. - попытался сыграть с z-index, position: и <div> переупорядочение, но не повезло.

P.p.s. - Да, я знаю, это не весь код, но системный информатор сказал, что я не могу вставить весь код, так что есть ссылка на codepen, спасибо.

Answer 1

Вам необходимо изменить положение своего видео на position: absolute;, потому что оно толкается на .overlay-content. Попробуйте изменить CSS, чтобы выглядеть следующим образом:

CSS

.videoContainer video { 
    min-width: 100%; 
    min-height: 100%; 
    position: absolute; /* Change to absolute */ 
    top: 0px;   /* Set top to 0px */ 
    z-index: -5; 
} 

Updated CodePen