Video for desktop, picture for mobile?

Question

HTML

Hello everyone ;)
I have a short question:
A simple video is played in the header of the site using the following code:

<video id="video_1" width="100%" height="100%" loop autoplay>
        <source type="video/mp4" src="/video/2.mp4" />
        <source type="video/webm" src="/video/2.mp4" />
        </video>

How to make the video play only on the big screen? For example, if the screen of a visiting user is less than 500pix, he gets just a static picture in the same place (although this will not free tablet owners from problems, but I would like to).
Well, or some other condition that will give out just a picture for all those who are not at the computer.
PS
The page is targeted marketing, please do not judge for such meanness as the video (and it is only 2Mb). :)
PPS
I guess JS must be involved here..

Answer 1

Of course, I could be wrong, and I need to check this.
But as far as I remember, display none doesn't hide elements from loading and rendering.
Those. the browser will still get them, no matter if the video is hidden or not.
Therefore, I have only one suggestion.
Dynamically, depending on the screen size, using jQuery to create a DOMa element.
In this case, the extra traffic will definitely not be loaded.
Since the script simply will not process its action.
Upd:
I checked, and it's true, display none does not affect the loading in any way.
The video is still loaded, but already in the background and eating traffic.

jQuery(document).ready(function(){
      var w = screen.width;
      if (w >= '1000') {
        $('.fullscreen-bg__video').append('<source src="video/video.webm" type="video/webm">');
      } else {
        if (w < '1000') {
          $('.fullscreen-bg__video').append('<div id="third">Картинка</div>');
        }
      }
    });

This is my decision. At resolutions greater than 1000 pixels, a video block is dynamically created. And for less than 1000, a block with a picture is created. You can write classes and styles yourself.
You can add a check for load and resize, if necessary.
Upd2:
Here is the result of the script. Videos are loaded only more than 1000.
But with display none for the block with the video, the video itself and the stroke in general.
The console of the last screen shows that the video continues to load.
The last lines, there we look at the video being loaded or not.
UpdLast:
To be honest, I myself like to put videos on the first screen of landing pages.
Never thought about it.
Now I will only implement it this way) So that visitors do not swear)))
Thank you for the question)
PS:
HTML

<video id="video_1" width="100%" height="100%" loop autoplay>
        
</video>

JS

jQuery(document).ready(function(){
      var w = screen.width;
      if (w >= '1000') {
        $('#video_1').append('<source type="video/mp4" src="/video/2.mp4" /><source type="video/webm" src="/video/2.mp4" />'); // в блок с ID video_1 добавляем код вставки видео
      } else {
        if (w < '1000') {
          $('#video_1').append('<div class="image"><img src="img/video.jpg" alt=""></div>'); // тут нужно прописать путь до картинки и название дива, который создается
        }
      }
    });

Like so. By your code.