I have this slider that I am wanting to put on the homepage of my site. However, in testing I noticed that if I have the video slide as the first slide (which is preferred) it prevents the slideshow from progressing to slide #2 on mobile devices. It loads and the play button is there for the video but it never goes onto the next slide.
I have checked your site but for me the is slider is advancing from the video slide at the moment.
Have you managed to solve the problem in the meantime ? Or is it only happening if you add it in the first slide ? In case yes, could you please set it back that way to so we can check on it ?
The issue was only happening with the video on the first slide. I moved the video back to the first slide but now my poster image (background image) is not showing up on mobile behind the play symbol for the video.
As I can see there is no video currently in the slider, only a link that leads to an external video on a different page.
Please create a test page with a test slider that includes the problematic video on the first slide, and that you can leave there without changes for us to check.
I'm sorry but I am a bit confused. What do you mean that there isn't a video slider? I attached a screenshot here. The video was put in through the "add media" button.
You have disabled the opening transition for the video layer, this is why the video does not appear. The opening transition generates the layers, without it they do not appear at all. Even if you do not want an opening transition, you need to enable it and remove any unnecessary animations for the layer to appear.
Sorry for the delayed response. We have looked into this further and the problem is that the video displays are quite limited on mobile browsers, due to certain restrictions the autoplay will not work so your videos won't start automatically. This conflicts with one of the slider's video setting that you use. You have set the slideshow to be paused till the end of the video, but because of this mobile browser restriction the video will not start and the slideshow still waits for it to end.
We are going to improve this feature to work better on mobiles. In the meantime you could set the video layer to only appear on desktops and set up a fallback image instead of it for mobiles and tablets. You can do that with the following options:
Or in case you want to keep the video on mobiles as well, you will need to change the Pause slideshow option in the Slider Settings -> Videos tab to No action. Unfortunately this will affect desktops as well and the slideshow will advance whether the video has finished or not. But you can match the slide's duration to the video's to show the full length of the video.
Thank you for the reply. We have elected to follow your advice and include a fallback image for mobile.
I do still have one issue though. If you view the slider at miracleshappenhere.org you can see that the button on the first (video) slide works perfectly and the buttons on the others do not. The code on all slides are the same so I am at a loss as to what the issue could be to cause the button to not work on the other slides.
Here is the HTML for the button: [vc_btn title="Watch Video" style="flat" shape="round" color="peacoc" size="med" align="center" link="https://www.miracleshappenhere.org/about-us/"]
One thing I noticed is that the button seems to have a hover property to it on the other slides but not on the first one. The HTML is EXACTLY the same. Would it be possible for the hover effect to be a setting in the slider?
If you could point me in the right direction to get this fixed that would be perfect thank you!
I'm sorry but I'm not exactly sure what should we look at. Could you please elaborate ?
It is possible to set hover inside the slider. I have checked the buttons and they appear the same for me on all slides. What is the different you are experiencing exactly ?
I added a screen capture video here to show you. As you can see, on the first slide I am able to click the button and be directed to the correct link. However, on slides 2 and 3 when I hover over the button the button turns orange and I am not able to click on it to get to the link.
The code is exactly the same in the HTML box for the button and the button is a short code within the theme. I don't understand what setting could be different about the other slides that would cause the hover effect and lack of ability to click the button.
I did check and there is not a hover transition on the slides.
The button on the first slide was set up completely different from the rest. You will have to copy that solution to the rest of the slides to make them work.
Also, there is a hover transition available in the plugin that you can apply on them for the hover effect.
Hello,
I have this slider that I am wanting to put on the homepage of my site. However, in testing I noticed that if I have the video slide as the first slide (which is preferred) it prevents the slideshow from progressing to slide #2 on mobile devices. It loads and the play button is there for the video but it never goes onto the next slide.
What is the fix for this?
Thank you,
Crystal
Hey Crystal,
I have checked your site but for me the is slider is advancing from the video slide at the moment.
Have you managed to solve the problem in the meantime ? Or is it only happening if you add it in the first slide ? In case yes, could you please set it back that way to so we can check on it ?
Hi Attila,
The issue was only happening with the video on the first slide. I moved the video back to the first slide but now my poster image (background image) is not showing up on mobile behind the play symbol for the video.
How can I fix this?
Thank you,
Crystal
As I can see there is no video currently in the slider, only a link that leads to an external video on a different page.
Please create a test page with a test slider that includes the problematic video on the first slide, and that you can leave there without changes for us to check.
Hi Attila,
I'm sorry but I am a bit confused. What do you mean that there isn't a video slider? I attached a screenshot here. The video was put in through the "add media" button.
This page is a test page with the video on the first slide. https://www.miracleshappenhere.org/sample-slider/
As of right now it is not auto-playing like it should either.
Crystal
You have disabled the opening transition for the video layer, this is why the video does not appear. The opening transition generates the layers, without it they do not appear at all. Even if you do not want an opening transition, you need to enable it and remove any unnecessary animations for the layer to appear.
Attila,
I have enabled the transition and it is playing now. However, I am back to my original issue. On mobile, the slide never advances past slide #1.
Crystal
Sorry for the delayed response. We have looked into this further and the problem is that the video displays are quite limited on mobile browsers, due to certain restrictions the autoplay will not work so your videos won't start automatically. This conflicts with one of the slider's video setting that you use. You have set the slideshow to be paused till the end of the video, but because of this mobile browser restriction the video will not start and the slideshow still waits for it to end.
We are going to improve this feature to work better on mobiles. In the meantime you could set the video layer to only appear on desktops and set up a fallback image instead of it for mobiles and tablets. You can do that with the following options:
Or in case you want to keep the video on mobiles as well, you will need to change the Pause slideshow option in the Slider Settings -> Videos tab to No action. Unfortunately this will affect desktops as well and the slideshow will advance whether the video has finished or not. But you can match the slide's duration to the video's to show the full length of the video.
Attila,
Thank you for the reply. We have elected to follow your advice and include a fallback image for mobile.
I do still have one issue though. If you view the slider at miracleshappenhere.org you can see that the button on the first (video) slide works perfectly and the buttons on the others do not. The code on all slides are the same so I am at a loss as to what the issue could be to cause the button to not work on the other slides.
Here is the HTML for the button: [vc_btn title="Watch Video" style="flat" shape="round" color="peacoc" size="med" align="center" link="https://www.miracleshappenhere.org/about-us/"]
One thing I noticed is that the button seems to have a hover property to it on the other slides but not on the first one. The HTML is EXACTLY the same. Would it be possible for the hover effect to be a setting in the slider?
If you could point me in the right direction to get this fixed that would be perfect thank you!
Crystal
I'm sorry but I'm not exactly sure what should we look at. Could you please elaborate ?
It is possible to set hover inside the slider. I have checked the buttons and they appear the same for me on all slides. What is the different you are experiencing exactly ?
Atilla,
I added a screen capture video here to show you. As you can see, on the first slide I am able to click the button and be directed to the correct link. However, on slides 2 and 3 when I hover over the button the button turns orange and I am not able to click on it to get to the link.
The code is exactly the same in the HTML box for the button and the button is a short code within the theme. I don't understand what setting could be different about the other slides that would cause the hover effect and lack of ability to click the button.
I did check and there is not a hover transition on the slides.
Crystal
The button on the first slide was set up completely different from the rest. You will have to copy that solution to the rest of the slides to make them work.
Also, there is a hover transition available in the plugin that you can apply on them for the hover effect.