How to us a picture instead of video for mobile users

December 20, 2021

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>

>Solution :

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)