0

Пытаюсь поставить видео на задний фон сайта. Нужно, чтобы при любой высоте окна видео занимало всю высоту, при этом обрезаясь по горизонтали. У меня вроде бы получилось, но снизу появилась полоса прокрутки и сам сайт стал шире, а когда окно уменьшается, полоса прокрутки увеличивается. Вот мой код

html

<div class="container-fluid page1">
    <video autoplay="autoplay" loop="loop" preload="auto" poster="{% static 'vid/bg_poster.jpg' %}">
        <source src="{% static 'vid/bg.mp4' %}" type="video/mp4">
    </video>
</div>    

css

.page1{
    display: flex;
    align-items: center;
    padding: 0;
    height: 100vh;
}
.page1 > video {
    position: absolute;
    z-index: -1;
    min-width: 100%;
}

Вопрос: как обрезать лишнее?

3

1 ответ 1

0

Так:

.page1 > video {
    position: absolute;
    z-index: -1;
    min-width: 100%;
    -webkit-size: cover;
    -moz-size: cover;
    -o-size: cover;
    size: cover;
}
0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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