archelon

<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 (window.innerWidth > 640 && window.innerHeight > window.innerWidth) 
else if (window.innerWidth < 641 && window.innerHeight > window.innerWidth)

хотелось бы что то уже делать по функционалу

document.addEventListener('DOMContentLoaded', function () {
    if (window.innerWidth < 640) {
        document.querySelector('.my-element').classList.remove('class-name');
    } else {
        document.querySelector('.my-element').classList.add('class-name');
    }
});

Есть вариант использовать document.addEventListener('DOMContentLoaded', function() {});

<div class="swiper-container">
  <!-- блок слайдера-->
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <a href="image1.jpg" class="lightbox">
        <!-- на ссылку вешаем скрипт лайтбокса -->
        <img src="thumbnail1.jpg" alt="">
      </a>
    </div>
    <div class="swiper-slide">
      <a href="image2.jpg" class="lightbox">
        <img src="thumbnail2.jpg" alt="">
      </a>
    </div>
  </div>
</div>

var swiper = new Swiper('.swiper-container', {
  //...
  renderFraction: function (currentClass, totalClass) {
      return '<span class="' + currentClass + '"></span>' +
              ' of ' +
              '<span class="' + totalClass + '"></span>';
  }
});