-
AuthorPosts
-
August 15, 2017 at 5:40 pm #839452
The title says it all, Video DOES NOT play on mobile. We added Advanced Layerslider with Video on one layer and the logo on another layer. Works fine on Desktop but Video does not play on mobile.
August 15, 2017 at 6:06 pm #839478Hey vegaspro,
Video backgrounds do not autoplay on mobile. This is not a theme issue, but rather a limitation of the device itself. The auto play limitation in mobile browsers is an intentional limitation put in by the OS developers. To my knowledge, there is absolutely no way to auto play content in a mobile browser because the event that is required to trigger content play is an OS/Phone event, one which the browser itself has no control over or interaction with.
Best regards,
Jordan ShannonAugust 15, 2017 at 7:03 pm #839516So then what is the solution to have video play on mobile?
August 15, 2017 at 10:59 pm #839618Hi,
I don’t see a video auto playing in your example link. I see a YouTube video that requires a play button on top of a static cloud background. Do you need the video to autoplay?
Best regards,
Jordan ShannonAugust 15, 2017 at 11:31 pm #839640No, do not need it to auto play.
August 15, 2017 at 11:52 pm #839644Hi,
Okay. Well in that case what you can do is create a second header made specifically for mobile that hosts the mobile friendly video link, but will be hidden on desktops. If you are not familiar with how to accomplish this please let me know.
Best regards,
Jordan ShannonAugust 16, 2017 at 12:43 am #839651No, not familiar
August 16, 2017 at 3:59 pm #839954Hi,
Please see the following for adding custom classes to elements. http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Please enable custom class name support and use the css below in Quick CSS and add 2 sliders on the page and use class name “only_mobile” or “only_desktop” on the Advanced Layout Builder elements
/*Show only in mobile or desktop*/ @media only screen and (min-width: 769px) { .only_mobile { display: none !important; }} @media only screen and (max-width: 768px) { .only_desktop { display: none !important; }}
Best regards,
Jordan Shannon -
AuthorPosts
- You must be logged in to reply to this topic.