Streaming live at 10am (PST)

Background video - Fixed image for tablets


#1

Hi there! Totally in love with new feature, video background. But given that it doesn't work in tablets, and tablets are growing and growing as browsing devices, could you allow us to choose one of the images of the video as background for tablets? Now it chooses first frame I think, and it's very random to show an appropriated image.

Thanks a lot!

David


#2

That would be cool. :blush::grinning::wink:


#3

There have been a few threads on this and even some solutions offered up by webflow staff. Looks like it's a waiting game for iOS to get better.


#4

By the way, now I put another video, and in tablets I can only see a white background:

http://www.eccecello.com

Can anyone tell me what's the exact behavior of "video backgrounds"??

I came to workflow, among others, because it was so adaptive, but tablets in portrait mode take the "desktop" view, and there should be a way to detect that it's a tablet, and force it to a specific view, not a fake adaptation of the desktop view. What do you think guys?

Thanks

D


#5

Hi,
Since video background isn't supported on mobile devices, what you can do is setting your video background element in an absolute position and display : none on tablet and mobile devices.
Make sure to set a higher z-index for your other elements (than the z-index of your video background element)
I'm still quiet noob to Webflow but you can for example take a screenshot of your video while using VLC for example and for the mobile devices you set a background image with the screenshot you took of your video.
(Sorry for my bad english)
Here is an example : http://les-contes-de-perrault.webflow.io/
Try to view is on you desktop and then resize your window to tablet or mobile size you will see that is a background image.
Hope I'm clear enough.
Regards
Blaise


#6

Hallo Blaise!

Thanks a lot for your tips, I have set display none on tablet and mobile devices, but in landscape mode, all tablets show the desktop view! My background video z-index is set -1.

That's why it would be very nice to be able to choose the frame it will be displayed, but in my case, it displays a white background, not even the fist frame. why?


#7

I added a similar wish list item in a previous post. I think it would be cool to be able to upload a placeholder image in place of the video for mobile and tablet views


#8

But can help me anyone to figure out why my background video in tablets (landscape) displays only a white or black background??

By the way, @Blaise_Posmyouck, very beautiful work with that animation!

Thanks


#9

https://preview.webflow.com/preview/ecce-cello?preview=bce62bbbb02fd1d624095f45eccb681e

My share link. Please help, some hours already trying to solve this...

in iOS 7 ipad mini, the first frame of video is shown. But in ipad 2 iOS 9.1 a white background is shown.

I just want my landscape tablet mode to look nice.

It seems there's something not working very nicely here...

Thanks!

Daivd


#10

Hi Eccecello,
I did not find a way yet to display a background image on tablet landscape view.
I think they are trying to fix this issue.
Best,
Blaise


#11

Hi Blaise,

but your website displays at least the fisrt frame of your video, why my site doesn't display anything (in tablet "landscape" mode I mean)??!
Meanwhile they find a proper way to display a given image in landscape tablets, I'd like not to have a blank background!

Thanks a lot.

David


#12

Ahhhhh!!!!! I can't believe it!!! I GOT IT!!! Yesterday until 3.30 am... Why doesn't just anybody from the crew explain this??

You just have to put a background image in the style of the background video, voila! when it's a tablet, it will display this image.

So no need to fix anything. It works so simple!!! How I didn't figure out this first!! omg!!

:smiley:
DAvid


#13

Haha Good job dude !!
I Will use it for my site as well then !
Thank you !!


#14

Yes that's the solution. Personally I think it's pretty obvious; We can set background images on literally every available element in Webflow. Including the background video widget. Simple as that!


#15