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

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

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

1 ответ 1

1
background-position: center center;
5
  • Если бы всё было так просто... с видео это не прокатывает..
    – foxer
    21 июн 2016 в 14:01
  • на видео пробовал сделать так:
    – foxer
    21 июн 2016 в 14:02
  • video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translateX(-50%) translateY(-50%); }
    – foxer
    21 июн 2016 в 14:02
  • видео получается отцентрировать, но когда вешаю это на div с картинкой под видео, уезжает контент..
    – foxer
    21 июн 2016 в 14:04
  • Так это к видео должно быть? Тогда простите, перепутал
    – leon0399
    21 июн 2016 в 14:10

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.