Как расположить видео-фон в центре страницы при ресайзе?

Question

foxer1 @foxer1

HTML
CSS

Как расположить видео-фон в центре страницы при ресайзе?

0
голос против
избранное
Такая проблема: фон сайта должен представлять из себя видео, высота которого 870рх, снизу к нему приклеена картинка, которая является статическим продолжением видео и совпадает с ним пиксель в пиксель. Проблема в том, как сделать так чтобы фон этот при сужении экрана не уменьшался, а как бы центрировался, т.е. в центре видоса есть объект, который должен оставаться в центре, но не ресайзится. Пробовал min-width, но по его достежении контент сайта перестает сужаться и появляется скрол, который не нужен. Чувствую, что решение данной задачи где-то на поверхности, но данный проект переделываем уже долго и что-то я уже запутался(( использую тут foundation 6. Заранее огромное спасибо) Вот разметка:

<div class="background">
<div class="video1" id="vid">
    <video autoplay poster="/assets/imgs/bg2.jpg" id="bgvid" loop>
        <source src="assets/video/earth3.mp4" type="video/mp4">
    </video>
</div>
    <div class="bottom">
            <div ui-view="header" id="header"></div>
          
                <div class="row" ui-view="middle">
                    <div class="large-2 columns show-for-large aside">
                        <div ui-view="aside"></div>
                    </div>
                    <div class="large-10 columns container">
                        <div ui-view="content" class="row"></div>
                    </div>
                </div>       
            <div ui-view="footer"></div>
    </div>
</div>

Вот стили:

.bottom {
    background-image: url(/assets/imgs/bottom_video.jpg);
    background-repeat: repeat-y;
    background-size: 100%;
    height: 100%;
    width: 100%;
}
.background {
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    position: absolute;
    width: 100%;
}
.video1 {
    display: flex;
}
video {

    width: 100%;
    height: 100%;
}

на видео пробовал сделать так:
video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
}
видео таким способом получается отцентрировать, но тогда видео и картинка внизу масштабируются не пропорционально при ресайзе и перестают совпадать

Вот codepan:
codepen.io/foxer1/pen/XKNaRe?editors=1100

сейчас всё ресайзится пропорционально и граница между видео и картинкой не видна, но мне не нужно чтобы видео уменьшалось