0

В шапке стоит видео, которое я через JS подгружаю и подгоняю под размер экрана. Но при первой загрузке страницы видео не растягивается по ширине экрана. Только если ресайзнуть окно. Что делать?

Тестируемое разрешение экрана 1366x768. Вот сам сайт и код:

var scWidth;
var scHeight;

function window_resize() {
    scWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    scHeight = (window.innerHeight > 0) ? window.innerHeight : screen.height;
    $('.scroll_bottom').css('display', (scHeight < scWidth ? 'block' : 'none'));

    var mainmenu = $('.mainmenu');
    var mainvideo = $('#mainvideo');
    if (scWidth > 767) {
        if (mainvideo.length < 1) {
            mainmenu.prepend('<video muted autoplay loop class="video" id="mainvideo"><source src="/assets/video/bg.mp4" type="video/mp4"></video>');
            mainvideo = $('#mainvideo');
        }

        mainvideo.attr('style', '');
        if (mainvideo.height() < mainmenu.height()) {
            // Делаем по всей высоте
            scale = mainmenu.height() / mainvideo.height();
            mainvideo.css('height', mainmenu.height() + 'px');
            mainvideo.css('width', (mainvideo.width() * scale) + 'px');
            if (mainvideo.width() > mainmenu.width()) {
                trim = (mainvideo.width() - mainmenu.width()) / 2;
                mainvideo.css('left', -trim + 'px');
            }
        } else {
            // Делаем по всей ширине
            scale = mainmenu.width() / mainvideo.width();
            mainvideo.css('width', mainmenu.width() + 'px');
            mainvideo.css('height', (mainvideo.height() * scale) + 'px');
            if (mainvideo.height() > mainmenu.height()) {
                trim = (mainvideo.height() - mainmenu.height()) / 2;
                mainvideo.css('top', -trim + 'px');
            }
        }
    }
}

window_resize();
$(window).resize(window_resize);

В атрибуте style ему задана правильная ширина, но само видео почему-то по ней не растянулось. Только после ресайза окна растягивается

2
  • $( document ).ready(window_resize); $( window ).resize(window_resize); 18 мар 2018 в 17:59
  • @MishaSaidov Не сработало
    – Fullstack
    18 мар 2018 в 19:14

2 ответа 2

1

Зачем это делать с помощью javascript? Достаточно CSS. Например, как это реализовано на Bootstrap
Т. е. HTML

<div class="embedvideo">
    <video muted autoplay loop class="video" id="mainvideo"><source src="/assets/video/bg.mp4" type="video/mp4"></video>
</div>

CSS

.embedvideo {
    position: relative;
    overflow: hidden;
    height: 0px;
    width: 100vw;
    padding-bottom: 100vh;
}
.embedvideo .video {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
}

Для video ещё можно добавить

video {
  object-fit: cover;
}
0

Добрый. Могу предположить, что в момент, когда выполняется функция window_resize, видео не успевает загружаться. Поэтому могут возникнуть какие-то проблемы с переменной scale. Вам надо повесить событие на загрузку видео и, как только оно сработает, вызывать window_resize.

Ваш ответ

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

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