I have encountered some problems and I am hoping you can assist me.
There is a page on my site called "Where To...Eat?" and I have three layer sliders on that page with video backgrounds. The problem that I have only happens on cell phones where the videos will either not play or sometimes it's a black or white screen with just the text animation showing up. Sometimes the animation doesn't show up and it's just a black / white screen with nothing playing.
Please take a look at them for me and let me know if you can help.
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
Unfortunately the video displays are quite limited on mobile browsers. Due to certain mobile browser restrictions, the autoplay will not work so your videos won't start automatically (leaving a blank area in their place). Even if you start the video manually by clicking it (if it's a video layer, not a slide background), it will be opened in a popup iframe window so it will not provide the same effect as it does on desktop.
This is controlled by the mobile browsers, so sadly we cannot do much about it. But as an alternate solution you could create multiple layouts for your slider, so you can show different content on mobiles, a fallback image for example.
You have two options to separately control the slider on mobiles. You can either use the device specific layers, or build a new slider.
Since version 6 of the plugin, you have the option to display layers only on certain devices (desktop, mobile, tablet), aka the device specific layers. This feature gives you the option to create separate layers, sizes and layouts for mobile and desktop view in the same slide, and only show them on the required device.
Additionally to the device specific layers, you could also build two sliders with different sizes or with different content for desktop/mobile, include them both to the site, and only display them (using the Hide over and Hide under options) on the required device. This method gives you more control, but requires more work.
Hello,
I have encountered some problems and I am hoping you can assist me.
There is a page on my site called "Where To...Eat?" and I have three layer sliders on that page with video backgrounds. The problem that I have only happens on cell phones where the videos will either not play or sometimes it's a black or white screen with just the text animation showing up. Sometimes the animation doesn't show up and it's just a black / white screen with nothing playing.
Please take a look at them for me and let me know if you can help.
Thanks.
Hello Ikamara,
Thank you for getting in touch with us. My name is Attila and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.
Unfortunately the video displays are quite limited on mobile browsers. Due to certain mobile browser restrictions, the autoplay will not work so your videos won't start automatically (leaving a blank area in their place). Even if you start the video manually by clicking it (if it's a video layer, not a slide background), it will be opened in a popup iframe window so it will not provide the same effect as it does on desktop.
This is controlled by the mobile browsers, so sadly we cannot do much about it. But as an alternate solution you could create multiple layouts for your slider, so you can show different content on mobiles, a fallback image for example.
Hello Attila,
Thanks very much for getting back to me and clarifying things for me.
Can you let me know how I can go about creating multiple layouts as you suggested? I think I have an idea but I am not sure.
You have two options to separately control the slider on mobiles. You can either use the device specific layers, or build a new slider.
Since version 6 of the plugin, you have the option to display layers only on certain devices (desktop, mobile, tablet), aka the device specific layers. This feature gives you the option to create separate layers, sizes and layouts for mobile and desktop view in the same slide, and only show them on the required device.
Additionally to the device specific layers, you could also build two sliders with different sizes or with different content for desktop/mobile, include them both to the site, and only display them (using the Hide over and Hide under options) on the required device. This method gives you more control, but requires more work.