Hello!
I’m using Enfold on my site http://tastymakes.com and I have a background self hosted video .mp4 but on mobile it only shows a black background… how can I add a fall back background image?
Thanks!
Hey!
You can add this on Quick CSS or custom.css:
@media only screen and (max-width: 767px) {
#top .av-video-slide .avia-slide-wrap {
background: url('IMAGE URL HERE') no-repeat center center;
}
}
Change the background url.
Cheers!
Ismael
Thank you so much for the quick response!
I’m having two issues with that fix:
1) It does not show on iPad
2) It’s not full screen.. I can only see the top of the image in my iPhone
Thank you!
Hey!
Make sure you’ve added in fallback video options to the same exact location where the self hosted video is. For example, you upload video.mp4 to the blank video field on the element in the Avia Layout Builder. You then would also add video.ogg, video.WebM to the same exact folder so that the theme can use them in places where the other format isnt supported.
See: http://www.w3schools.com/html/html5_video.asp
With iOS, videos can not be autoplayed so the user has to actually start a video playing which unfortunately we can’t change.
Cheers!
Devin
Hey Devin, thanks, so where exactly should I place the background fall back image?
Thanks
Ignazio
On that fullscreen slider element where you added the url to your mp4 video there is a button just under that field for “Choose fallback image for mobile devices”.
hey ignaziolaci
Your site is very nice ! my compliments i like those via transform rotated (:before and :after) white “bar”