How to us a picture instead of video for mobile users

Question

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>

This question has what seems to be a sensible answer, actually checking for low power mode, although some commentators aren’t certain. Does it help? https://stackoverflow.com/questions/46670150/low-power-mode-detection-in-javascript-for-ios11 — A Haworth, Dec 20 '21 at 05:31

score 1 · Accepted Answer · answered Dec 20 '21 at 05:26

1

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)

answered Dec 20 '21 at 05:26

Aditya

1,132
1
9
28

1

Thank you this works! However my image isnt the same size as the video was. Is there a way I can make it the same resolution? – Tre Seibert Dec 20 '21 at 05:37
2

you can set height and width or aspect-ratio to the image – Junaid Shaikh Dec 20 '21 at 05:46
1

@TreSeibert You can use services like [Big JPG](https://bigjpg.com/) to upscale your images. – Aditya Dec 20 '21 at 05:51

Junaid Shaikh · Answer 2 · 2021-12-20T05:43:13.237

0

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;
    }
}

edited Dec 20 '21 at 05:43

answered Dec 20 '21 at 05:18

Junaid Shaikh

1,045
4
19

Im sorry im a bit confused as what you're saying, im new to front end work. Could you code what you're saying if you have time, it'd be highly appreciated? – Tre Seibert Dec 20 '21 at 05:25
have a look, I updated my answer – Junaid Shaikh Dec 20 '21 at 05:44

score -1 · Answer 3 · answered Dec 20 '21 at 05:23

@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;
  }
}

How to us a picture instead of video for mobile users

3 Answers3