Tagged: background video, fallback
-
AuthorPosts
-
October 15, 2022 at 9:08 pm #1368978
Hey!
I use a background video. Sadly this doesn’t work on mobile devices?
Anyhow I use a fallback image which works fine on phones but doesn’t load on tablets.. instead it only shows the overlay color.Is there an easy way to have a background video on tablet/mobile?
If not, how can I get the fallback image to load on tablets (or other than desktop)?Thanks,
ChrisiOctober 16, 2022 at 2:28 pm #1369012Hey hochenb,
Thank you for your question, mobile browsers such as Safari and Chrome block background videos from auto-playing, this has been the standard for for many years, this is why there is a notice in the elements:
Some plugins offer “Hacks” around this, but Safari and Chrome block more of these “Hacks” with each update, Enfold follows the browser rules and doesn’t add these “Hacks”
The LayerSlider may play a background video on mobile devices, but it is unknown how long this will work.As for the fallback image not loading on tablets, I tested this with the color section, I added a Background Video and checked the option Hide Video On Mobile Devices:
then I added a Custom Background Image for mobile & tablets:
Now on desktop the background video plays:
and on tablet the background image shows:
below I have linked to my test page, are these the steps you tried, if not please explain and link to your test page.
I will point out that I don’t have an actual tablet device so I tested with the Dev Tools in Chrome and BrowserStack.com which uses real devices, the standard iPad showed the background image:
and the iPad Pro showed the background video, so that was an added bonus:
Best regards,
MikeOctober 16, 2022 at 9:21 pm #1369032Hey!
I did set everything as you described it above.
The fallback only works with the iphone, but not on any of my ipads.Interesting, the video on your test page works on my ipads, and falls back to the image on my iphone.
October 16, 2022 at 11:04 pm #1369036Hi,
Thanks for the link to your page, I tested in my Chrome Dev Tools for tablet (768px) and on BrowserStack.com iPad & iPad Pro and your fallback image showed for them, please see the screenshots in the Private Content area.
Do you have a strong wifi connection? Try with the iPad plugged in to see if that helps.
Also try to clear the cache, and note that for Safari you often need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.