Есть задача - для устройств с экраном шире 767px загружать видео, а для мобильных загружать и отображать только картинку/постер.
Средствами css её не решить, потому что если просто скрывать видео для мобильных устройств, оно всё равно будет загружаться и кушать трафик. Поэтому делаю на js/jquery.
С событием $(window).load() всё работает отлично. Проблема возникает с $(window).resize(). Если сначала запустить маленький экран и потом его расширять, то всё ок - видео появляется только при ширине более 767px. А вот в обратную сторону это не работает - из DOM удаляется source, но видео продолжает воспроизводиться.
$(window).on('load resize', function(){
if($(window).width() >= 767) {
$('#bg-video').html('<source src="https://pmas.ru/upload/medialibrary/5a0/videoplayback.mp4" type="video/mp4">');
}
else {
$('#bg-video').html('');
}
});
#bg-video {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="bg-video" autoplay="true" loop="true" muted="muted" poster="img/video-poster.jpg"></video>
Почему видео продолжает воспроизводиться, хотя source уже нету в DOM, и как это поведение переопределить?