How to us a picture instead of video for mobile users-CodePudding

I'm having a issue with mobile users using low power mode not loading the background video on my website, i've done some researching and there seems to be no resolution for this issue. This brings me to my question, how do I make it so desktop users see the video but mobile users see an image instead? Below is my HTML and CSS for my background video ID.

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
    display: block;
}
.bg-video::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}

      <video autoplay loop muted playsinline preload="true" id="bg-video" poster="assets/images/backvideo.png">
          <source src="assets/images/course-video.mp4" type="video/mp4"  />
          <source src="assets/images/course-video.webm" type="video/webm" />
          <source src="assets/images/course-video.ogv" type="video/ogv" />
      </video>

CodePudding user response：

You can use media Query for that, For Example:

#video {
  display: block;
}
  
#image {
  display: none;
}

@media (max-width: 720px) {
  #video {
    display: none;
  }

  #image {
    display: block;
  }
}

<video id="video" controls>
  <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_2mb.mp4" type="video/mp4"/>
</video>

<img id="image" src="https://sample-videos.com/img/Sample-png-image-200kb.png">

This above code snippet will show a video if the user's screen is bigger than 720px which you can change according your needs in here @media (max-width: 720px)

CodePudding user response：

just use display: block; on <video> and display: none; on image for large screen, and display:none; on <video> and display: block; on image for small screens.

@media  (max-width: 768px){
    #video{
          display: none;
    }
    #image{
          display: block;
    }
}
@media  (min-width: 768px){
    #video{
          display: block;
    }
    #image{
          display: none;
    }
}

CodePudding user response：

@media only screen and (max-width: 425px){
    #bg-video{
    display: none;
  }
  
  body{
    background-image: url("https://unsplash.it/1920/1080?random");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}