Video Plays on Desktop, but I can’t get image to show on Mobile

Hi @gmex1292,
Thanks for your question. You may put image layer and set apply a custom class e.g. hide-on-mobile After that go to Slider Settings > Appearance and add the style below to Slider custom styles:

@media (min-width:920px){
.hide-on-mobile{
  display:none !important;
}
}

It will hide the any layer with class hide-on-mobile on scree width less than 920px. Or you may clone whole slider and add image layer instead of video in duplicated slider. Then you will need to set up visibility of both Sliders (via Slider Settings > Appearance > Visible from/to) to make 1st slider to appear on desktop only and another slider on tablets and mobile devices.
Sop you will be able to add 2 sliders on the same page- 1 with video will play on desktops and another one with image will play on tablets and mobile phones.

Thank you! It’s not quite working yet. I want to do the opposite: show the image on mobile (because the video won’t play) and hide the image on desktop and play the video.

Put simple, because videos won’t play on mobile, I want to show an image placeholder instead.

Here are the settings:
* On the Video tab, I have the 3 video formats in there.
* I clicked the “AddImage” button (not the Image tab) and insert an image
* On the Style Tab, in the “CSS Classes” field I have .hide-on-mobile.
* In the Slider Custom Styles, I have this code:

@media (min-width:920px){ /* Show it on mobile */
.hide-on-mobile{
  display:block !important;
}
}

.hide-on-mobile{ /* Hide it on desktop */
  display:none !important;
}

But the behavior is:

Desktop: slide fades in and video plays. Then 1 second after that, the image fades in and partially covers the video.

Mobile: image fades in, but the text layer does not.

Hi

On the Style Tab, in the “CSS Classes” field you need to have hide-on-mobile just text without dots.

In the Slider Custom Styles, you need to have this code:

@media (min-width:920px){
.hide-on-mobile{
  display:none !important;
}
}

Please try this.

So sorry this is still not working properly. Whenever I add the image by clicking the Add Image button and choose the image, it displays in the content area where I can move it around and select it etc. I then can edit the Styles and other elements. However, as soon as I add the CSS class name to the CSS Classes field it disappears and I can’t select it or see it again. This does not happen when I add the “dot”. It’s very weird.

It also covers the text layer, and I have to re-add the text layer.

It has a different behavior now:

Desktop:
Slide comes in fine with video, but the image overlay comes in over the top of it.

Mobile: The slide and picture comes in, but the text layer is missing.

Hi @gmex1292,
1. you stop seeing an image while editing slide because the style hide-on-mobile works. It simply hides image on desktop. You may move the layer under other widgets in this way https://prntscr.com/q3wjk9
2. remove the dot to make the style work and check the slider on mobile and desktop.

As an option you may additionally place the style below to Slider Settings > Appearance > Custom styles in order to see the image layer in the slide editor:

#mpsl-workground .hide-on-mobile{
  display: block !important;
}

I was able to get it to work. What I had to do was in addition to what you suggested above, was add the image layer by using “add image” button. I selected the image, then added the hide-on-mobile CSS class. At that point it was still doing was it was before on desktop: the video would slide in and start playing, then the layer image would slide in over the top of it. On mobile, it would show blank for a second then the image would fly in.

I then went into the Layer selection button, selected the Image layer and deleted it.

Now it works properly. I did that on all the slides and they all work properly now.

Hi @gmex1292 That’s great. Thanks for your feedback.