Streaming live at 10am (PST)

BACKGROUND VIDEO adjustments for mobile?


#1

Hello all,
I have a little issue with my 2 videos on our product website.
I could make them smaller and adjust considerably in mobile view,but they still are a bit off.

Any help?

www.toca.site

Here is my site Read-Only: www.toca.site
(https://preview.webflow.com/preview/toca?preview=3a5581412c10e4b5a186653ed1b47360)


#2

Could you share with us you read-only project so we can understand the structure of your site?

Here is how to: https://university.webflow.com/article/sharing-your-sites-read-only-link


#3

https://preview.webflow.com/preview/toca?preview=3a5581412c10e4b5a186653ed1b47360


#4

Hi @Andre_Wakko,

I hope I understand well what you are trying to achieve.
The words in your video get out of screen on smaller devices and it is normal as the aspect ratio of the video will not adapt.

As you are setting the height to 120 vh it will expand the width beyond the viewport to preserve this aspect ratio.

This is how I will go about it:
1 - create a video wrapper div and set it to the desired width probably 100vw in your case
2 - put the background video element in this div
3 - the video background element width to 100%
4- and now a bit of magic
5 - with a bit of math
( height of your video / width of your video ) x 100
so let say you got a 1920 by 1080 hd video it will give you : 1080/1920 x 100 = 56.25
6 - set the padding top of the background video to 56.25%
7 - voila you got a responsive aspect ratio background video inside a wrapper :wink:

I hope it will make it

Max

EDIT : for your top video with black and white texte you could go as well with a loop interaction within Webflow to animate appear disappear of text element, size, background colour, text colour etc as it is fairly simple. This way you could have a full control over responsiveness and also it will be way faster to load than a video as well as working on mobile devices.


#5

Hello Max,
thanks for your reply!
I tried this way (is after the footer on the page)
but still getting some crop video.
Did I make something wrong?

thanks
a.