DIVSIDE

у меня так:

<video id="myVideo" src="" muted playsinline autoplay loop poster="/media/poster.jpg"></video>

document.addEventListener('DOMContentLoaded', function () {
  const myVideo = document.getElementById('myVideo'); 

  if (myVideo) {
    setMyVideoSource();
  }

  function setMyVideoSource() {
    if (window.innerHeight < window.innerWidth) {
      myVideo.setAttribute('src', '/media/video-desktop.mp4');
      myVideo.load();
      myVideo.play();
    } else if (window.innerHeight > window.innerWidth) {
      myVideo.setAttribute('src', '/media/video-mobile.mp4');
      myVideo.load();
      myVideo.play();
    }
  }
});

в else if можно добавить условия для разных разрешений.
например,

else if (window.innerWidth > 640 && window.innerHeight > window.innerWidth) 
else if (window.innerWidth < 641 && window.innerHeight > window.innerWidth)

также можно дополнительно повесить эту функцию на onresize

- vw/vh всегда относятся к размеру текущей видимой области просмотра. Если у вас есть адресная строка или панель вкладок, которые перекрывают часть экрана, vw/vh будут учитывать это перекрытие.
- lvw/lvh, svw/svh и dvw/dvh все относятся к размеру окна просмотра с учетом различных состояний динамических панелей (например, адресной строки или панели вкладок в мобильных браузерах).

vw будет равен lvw только в том случае, если все динамические панели скрыты. В противном случае vw будет меньше, чем lvw.