Помогите дописать код

У меня есть слайдер, в слайдере 4 видео, надо чтобы когда юзер заходил через мобильное устройство показывало картинки вместо видео, проблема в том что надо каждое видео менять на картинки, даже если седлать через обычный media query, то как? я начинающий программист, помогите решить эту задачу
код в темплейте:

Код (Text):

1. <video class="player__video" width="506" height="506" muted preload="auto" playsinline poster="[xfvalue_videopathimage]">
2.                   <source src="[xfvalue_videopath]" type="video/mp4">
3.                   Your browser does not support the video tag.
4.                 </video>

код в css:

Код (Text):

1. .player {
2.   position: relative;
3.   text-align: center;
4.   cursor: pointer;
5.   width: 100%;
6.   height: 100%;
7. }
8.  
9. @media (max-width: 767px) {
10.   .player {
11.     overflow: hidden;
12.   }
13. }
14.  
15. .player__video {
16.   overflow: hidden;
17.   max-width: 100%;
18.   position: relative;
19.   vertical-align: top;
20.   height: 100%;
21.   width: 100%;
22.   width: 100%;
23.   height: 100%;
24.   -o-object-fit: cover;
25.      object-fit: cover;
26. }