Change the background video with media queries depending on the device (one video for desktop, another one for mobile)

Question

Im trying to change the video regarding the devices. Im using revolution slider 5.4, I have two video, one is for desktop, the other one for mobile, At the moment it just hide the desktop video but the mobile one is not loaded

Here on desktop ;

HTML

<div id="rev_slider_8_1_wrapper" class="rev_slider_wrapper fullscreen-container" data-alias="weone" data-source="gallery" style="background:transparent;padding:0px;">
    <div id="rev_slider_8_1" class="rev_slider fullscreenbanner fullvid" style="display:none;" data-version="5.4.8.1">
        <ul>
            <li data-index="rs-36" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="300" data-rotate="0"  data-saveperformance="off"  data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                <img src="res/img/slider.jpeg"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg" alt="slider-image" data-no-retina>
                <div class="rs-background-video-layer fullvid"
                     data-forcerewind="on"
                     data-volume="mute"
                     data-videowidth="100%"
                     data-videoheight="100vh"
                     data-videomp4="res/video/slider-video.mp4"
                     data-videopreload="auto"
                     data-videoloop="loopandnoslidestop"
                     data-forceCover="1"
                     data-aspectratio="16:9"
                     data-autoplay="true"
                     data-autoplayonlyfirsttime="false"></div>
            </li>
        </ul>   
    </div>

     <div id="rev_slider_8_1" class="rev_slider fullscreenbanner mobilevid" style="display:none;" data-version="5.4.8.1">
        <ul>
            <li data-index="rs-36" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="300" data-rotate="0"  data-saveperformance="off"  data-title="Slide" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                <img src="res/img/slider.jpeg"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="off" class="rev-slidebg" alt="slider-image" data-no-retina>
                <div class="rs-background-video-layer mobilevid"
                     data-forcerewind="on"
                     data-volume="mute"
                     data-videowidth="100%"
                     data-videoheight="100vh"
                     data-videomp4="res/video/slider-video-mobile.mp4"
                     data-videopreload="auto"
                     data-videoloop="loopandnoslidestop"
                     data-forceCover="1"
                     data-aspectratio="16:9"
                     data-autoplay="true"
                     data-autoplayonlyfirsttime="false"></div>
            </li>
        </ul>
       </div>   
    </div>

CSS

@media screen and (max-width: 425px) {
  .rs-background-video-layer.fullvid {
    display: none;    
    }
  }

  @media screen and (max-width: 425px) {
    .rs-background-video-layer.mobile {
      display: block;    
      }
    }

Answer 1

I think you should do like this:

@media screen and (min-width: 425px) {
    .rs-background-video-layer.fullvid {
    display: none;    
    }
}

@media screen and (max-width: 425px) {
    .rs-background-video-layer.mobile {
      display: block;    
      }
}