Как решить проблему со вставкой видео на устройствах с шириной экрана выше 992px?

Question

[sasha_jarvi]

Имеется следующий код:

<div class="main-banner__video d-none d-lg-block">
</div>

    window.onload = function(){
    if(window.innerWidth >= 992)
        $('.main-banner__video').html('<video src="/video/Nikola_v6_for _site_1_1.mp4" width="100%" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\' autoplay loop muted></video>')
};

Таким образом, при ширине экрана 992px и выше в контейнер должно вставляться видео, но этого не происходит. Как исправить эту ошибку?

Answer 1

[sasha_jarvi]

Немного подправил синтаксис, и видео заработало

window.onload = function(){
    if($(window).width() >= 992) {
        $('.main-banner__video').html('<video src="/video/Nikola_v6_for _site_1_1.mp4" width="100%" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\' autoplay loop muted></video>')
    }
}

Answer 2

[ParaBellum577]

А через медиазапрос упростить не пробовали? Если ширина меньше чем 992px => display:none;

Comments

[sasha_jarvi]

Думал об этом, однако в случае display: none видео будет подгружаться с сервера (хотя и не будет отображаться), а моем случае нужно, чтобы оно не подгружалось