Change video source on screen size

I want to switch the source of a video depending on screen size. So that it is loading a small and a large video. I hope, that my site perform/loads faster. At the moment it is working with jQuery, but I want it in pure javascript.

Here is my jQuery code:

const mainVideo = $('#myVideo');
    
const medi      = "/videos/ground_540p.mp4";
const large     = "/videos/ground_1080p.mp4";

  switch ( true ) {

      case ($(window).width() >= 1080):
          mainVideo.append("<source type='video/mp4' src='" + large + "' />");
          break;

      case ($(window).width() >= 720):
          mainVideo.append("<source type='video/mp4' src='" + medi + "' />");
          break;
  
  }

That is my pure javascript:

const mainVideo = document.getElementById("myVideo");
    
const medi      = "/videos/ground_540p.mp4";
const large     = "/videos/ground_1080p.mp4";

  switch ( true ) {

      case window.innerWidth >= 1080:
          mainVideo.append("<source type='video/mp4' src='" + large + "' />");
          break;

      case window.innerWidth >= 720:
          mainVideo.append("<source type='video/mp4' src='" + medi + "' />");
          break;
  
  }

In my firefox inspector it is displayed, but it is grey. It is not showing(not loading) Here is a image:

I hope, this a good way.. and my video is not loading twice.