media query works on browser resize but not on mobile device

Question

The purpose of this is to hide a video and replace it with a background image on mobile devices.

I've seen many questions about the same topic. A lot of them say, add

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

and everything seems to work out fine.

I have that already. My css is:

@media screen and (max-width:999px) {
    .et_pb_section_video_bg {
        background-image:url("/wp-content/uploads/2017/02/Old-Instrument-Broken-Abandoned-Wrecked-Piano-Dark.jpg");
        background-size: cover;
    }
    #mep_0 { display: none; }
}

On a desktop, I can narrow the window and I see the background image that I specified in my css. On a phone or tablet, there is nothing.

Here it is in action: UPDATE: REMOVED URL

Any ideas why this won't work on mobile devices?

Answer 1

Add this to the bottom of your stylesheet. It will make it work.

HOWEVER there is a small problem of showing video on mobile devices. Videos don't autorun so your video won't play on mobile devices automatically.

More here: Youtube embedded video: autoplay feature not working in iphone

@media screen and (max-width: 999px){
#mep_0 {
    display: block;
  }
}

So I recommend showing backgorund Image instead of video on mobile devices.

UPDATE In your case, the video section wont' even load on mobile devices that's why the background image is not showing. You need to add this with your image. Also get rid of the old css you added :)

@media screen and (max-width: 999px){
#homevid {
    background-image: url(https://fandf-si7mj9eju7kjbgtgaeu.netdna-ssl.com/wp-content/uploads/2017/02/Old-Instrument-Broken-Abandoned-Wrecked-Piano-Dark.jpg);
    background-size: cover;
}
}