Ability to upload and set a static image for the Background Video element for mobile device breakpoints

Since BG video can’t autoplay on mobile. It would be awesome to have the ability to upload our own placeholder image for the video, rather than the first frame of the video as the default image.

1 Like

Great recommendation @Syndicate15 :smile: in the mean time you can add a background image to your background video element from the Tablet breakpoint down :smile:

2 Likes

Ohhhhhh nice :upside_down_face::slightly_smiling_face: thanks

Excellent point. But it’s worth noting that iPad Pro and even regular iPad display the desktop view in landscape. Any ideas about doing a workaround? I know @jprimiani was interested in experimenting with a GIF fallback recently.

Hi @McGuire, for iPad, one temporary workaround would be to create a custom media query to set the bg image on the class starting at 1024px, and put that in the head. This will only show on the published site, but should work to show the bg image starting at iPad

Something like this assuming the video bg class is video-background:

 <style>
@media (max-width: 1024px) {

.video-background {
    background-image: url("path to bg image in assets");
}
}
</style>

Thanks! I added this to the head code but no luck:

Hi @jprimiani, if some help is needed with the custom media query for iPad/iPad Pro, could you create a post for this and share the details? Posting Guidelines for the Design Help Category - General - Forum | Webflow

Yes, here is the read only link https://preview.webflow.com/preview/massivedynamic?preview=9cd5dbcf6c2dad545c68ed71cba08366