Video slider doesn't work on mobile screen

Support
#1

Hi there, here is the link to my website: https://theandibrand.com/ which consist of a slider. When it starts, the 3rd slider contains a youtube video which plays well in other device but not in mobile screen when I check from my mobile. Please check once on your mobile, you’ll see that, when the 3rd/video slide starts, the screen gets black/blank, nothing shows up.

I’m using revolution slider for this slider.
Looking forward to a quick solution.
Thanks

#2

Hi there,

The video sliders are not available on mobile devices due to many different factors from the CPU usage to the internet data usage of the videos in mobile which phone producers do not allow to auto play the video.

Anyhow you need to have a poster image for the mobile view which will replace the video.

Thank you.

#3

Hello Christopher,

Thanks for your reply. Did you mean a still picture/snap of the video as a poster image? And is there no way to have the video playable in the smartphones by default/automatically?’

Thanks
Asad

#4

Hey,

Exactly, in the mobile devices, is necessary to use the video as a poster image. You can learn more details here: https://www.dacast.com/blog/why-video-autoplay-does-not-work-on-mobiles/amp/

#5

Hi John,

Thanks for your reply. Okay, so instead, I want to hide that particular slide for mobile screens, now I found these codes and tried to make it work, but it didn’t. It’s still not hiding the 3rd/video slide in mobile screen. Could you please help me to hide that particular video slide for mobile/touch devices?

That’s the code I found and used:
@media(max-width: 769px) {
.x-slider-container {
display: none;
}}

Thanks
Asad

#6

Hi Asad,

You can add a unique class to your video layer then target it in your css

eg.

@media(max-width: 769px) {
      .my-video {
          display: none !important;
      }
}

Hope that helps

#7

Hi Paul,

When I selected the 3rd/video slide and went to the “Attributes” navigation, the “Classes” options are blank (please see the screenshot: http://prntscr.com/gcgaii ). It’s because I can’t select the video layer. So how can I add the class?

#8

Hi there,

You can select it from the timeline below it instead of that preview window. And it will only work if you added your video as a layer, else, you’ll need different CSS. Example,

@media(max-width: 769px) {
.rev_slider_wrapper video {
display: none !important;
}
}

Thanks.

#9

Hello,

The layer is not selectable and I’m sorry but in my previous reply in the screenshot, I showed that it’s just a youtube video ID that I used. And yet I tried to select the timeline from below the area already, but for you I have tried once again and grabbed a screenshot: http://prntscr.com/gctvl4

Please see the previous and present screenshot carefully and give me a better solution.

Thanks

#10

Hi there,

Which is why I provided the alternative CSS in case you use it as a background video :slight_smile:, but yes, it will not work since it’s a youtube video.

Please provide your login credentials and what slider you’re working on in a secure note, I can’t provide you any solution yet since I don’t see any video from your slider (checked it in your site’s source code). The youtube videos you have in your site is added through Popups plugin and not in the slider. Which I thought, the ID in your screenshot is just nothing. More information on how we could test and see the slider that you’re working on is very much helpful.

Thanks!

#11

Hi, thanks for your reply.

I have shared the login detail with a secure note of this reply. Now see the screenshot of the slider: http://prntscr.com/gd84fc
Slider name: Startjun2017
Main Slider number: 11
Slide number: 3

Thanks and let me know if you need anything else. Please note that, I only need that video slide to be hidden from mobile or touch devices.

#12

Hi there,

Looks like you forgot the username :slight_smile: , please provide it as well.

Thanks!

#13

Ah, crap! Many ways it’s just getting late. I’m sorry, I don’t know how could I miss that. I have updated the secure not. Please check the update.

Thanks

#14

Hi there,

Please add this

@media(max-width: 769px) {
.rev_slider_wrapper video, .rev_slider iframe {
display: none !important;
}
}

Then make sure you set the correct poster image, currently, it’s set to a white blank image. You should choose the youtube poster image, the button should be available where you add the youtube ID.

Thanks!

#15

Hi,

Strange thing is that. I have finally got some relevant reply after trying several times. So far with any topic in ThemeCo I have never waited that long for a solution. But yet, the last solution, isn’t what I want anymore that I have listed long above. Rather I wanted to hide that particular video slide from mobile/touch device. Please see my previous replies and the secure note for access, so that you can review and provide me a best easier way to hide that slide.

Thanks

#16

Hi,

You can try this code instead.

@media(max-width: 769px) {
    .home .rev_slider > ul li:nth-child(3) {
        display:none !important;
   }
}

Hope that helps.

#17

Hi Paul,

I’m really surprised, is it that hard? I have given my login access as well for your review, so that you can provide me the right solution. But unfortunately after that much attempts, I don’t have a solution yet!!! Strange! It’s still not working. I just couldn’t hide the 3rd/video slide.

Is it not fixable?

#18

Hi There,

Unfortunely that is not a functionality offered by Revolution Slider,

I would reccomend you cloning your slider, creating a second slider without the third video slider.

On Cornerstone add your first section with the complete slider and set your section to be hidden on mobile and tablets.

Add a second section with the new slider you created and hide it on desktop and laptops.

Hope it helps