Background video responsive size

Design help General
1

Hello Webflow community.

I just started working with webflow a few weeks ago and so far, I am amazed with it.
However, I bumped into a problem that I just can’t find any solution to. For a client, I had to make a website with a hero video playing in the background.

My problem was the following: I’d like the video to automatically change size and manage the original 16:9 aspect ratio on tablet and mobile as well. So far I had tried a lot of different methods, different divs, paddings, widths and heights, but every time I try to test the website, the video starts playing as if it would have a lot more space, meaning, on tablet and mobile, you can only see the center of the video.

I tried using Vimeo and embedding that code, but since I don’t have Vimeo premium, I cannot hide the controls and make it autoplay.

EDIT: I found a solution to this problem that I am writing down in the main post as well.

All you have to do is add

.w-background-video>video {   
max-width: -webkit-fill-available;

To the custom head code in the project settings, inside the style tags.
I tested it with Chrome and Safari on Mac, and Safari on iPhone – it seems to be working on these browsers!

2 Likes
2

So I had an issue like this but with a static slider but I think it should work for this as well. Set your section with the background video to have a height of 56.25 VW which will make the hight scale perfectly to 16x9 based on the width. You may need to set the section to 100% wide, not sure.

2 Likes
3

Thank you for your reply. My problem is not with sizing the element the video resides in.

50
501918×1004 246 KB

As you can see, the problem happens when you actually visit the website on something other than desktop. The video starts playing, but a huge portion of it is ‘cut off’ compared to desktop, since it doesn’t resize itself to keep up with the device size, I hope you understand.

4

@Levente,

I’m just thinking loud but I think you might want to explore the padding-top hack to preserve the aspect ratio of your video. Here is a really interesting article about aspect ratio boxes on CSS tricks.
So let’s say your video as an 16:9 aspect ratio, you’d divide 9 by 16 and multiply that number by 100% and set that percentage based number (56.25%) to be your padding-top.

In other words: padding-top: calc(height/ width * 100%);

32
32975×435 44.8 KB

Since you’ll need to add custom (css) code, you’d need to apply the padding-top css rule to the class or id of your background video.

Let me know if that helps !

5

Helloy Anthony, thanks for your reply.

My hierarchy is the following:
I have a hero-video-wrapper div block, in which the hero-video element (background video) resides in. The hero-video element has a 100% width and 56.25 vw height on all screen sizes.
I added

<style>
.hero-video {
padding-top: calc(height/ width * 100%);
}
</style>

To the head code in the settings.

However, it still fails to load the video correctly.
I’m linking a video so that you can see my problem.

https://vimeo.com/user91390904/review/325638292/edc3d61c10

6

Ho,

the height/ width was just for the example sorry.
You could try replace calc(height/ width * 100%); by calc(9/ 16 * 100%); which is this 56,25%… (if your video has a 16:9 aspect ratio) you could simply write padding-top: 56%;

Hope that helps

7

Sorry, I am not yet a seasoned CSS user :sweat_smile:

I tried what you wrote, and it still produces the same issue.
I’m starting to think this has something to do with the way the background video element works… sadly I have not found an other solution to upload my own video.

8

Okay, maybe the native Webflow background video isn’t enough for you.
I used custom code embeds in my website to display auto-played videos to showcase some the UI I designed in Webflow. Have a look here: https://www.anthonysalamin.ch/

I used cloudinary.com to host my Mp4 video for free.

Here is the code I used:

<video autoplay loop muted playsinline poster="https://uploads-ssl.webflow.com/5b05ed948ee27f736bbe9315/5c010c25f033cc0a5e62dfdc_poster-34.jpg">
  <source src="https://res.cloudinary.com/dz1fe5pgl/video/upload/v1543443459/Anthony%20Salamin%20Website/34.mp4" type="video/mp4">
</video>

You might want to explore that option too and combine it with the padding-top hack we talked about earlier. In your case, I would try to add a class to your <video> tag and target that class with CSS to modify its padding.

Hope that helps !

2 Likes
9

Thank you for your answer again. In the end, I found an answer while digging though the Inspector on the website. In case anyone struggles with this problem in the future:

You have to add

.w-background-video>video {   
max-width: -webkit-fill-available;

to your custom Head code in the project settings inside the style tags.

I tested it with Chrome and Safari on Mac, and Safari on iPhone – it seems to be working on these browsers! :slight_smile:

2 Likes
10

@Levente - I just wanted to say that I love you for finding a solution for this. Seriously thank you! :pray: Seriously send me your Venmo and I’ll send you some money for a beer!

11

Thanks @Levente. I found that using your solution plus adding a top padding of 56.25% (for a 16:9 video) was the full solution for me.
I’ve been working on this for 3 weeks, trying every tutorial online, even tried third-party solutions. Nothing worked except your solution (plus top padding).

Thanks so much.

Really, Webflow should make this default. It’s kinda nuts otherwise.

HOT TIP! If you actually wanted to ‘zoom in’ the video (while keeping centered) for smaller screen sizes (not preserving the aspect ratio), you can add a >100% width value to the Background Video element. For example, I used 132vw and it worked a charm on my site.
BE AWARE this causes overflow:hidden to not behave expected!

12

Thank you so much for mentioning Cloudinary. Been having issues of my own with a looping video idea for awhile and your post helped me solve it. I appreciate it!

1 Like
13

@anthonysalamin

Did you ever have trouble with Cloudinary lagging briefly or glitching, before it loops? I’m having an issue with the videos on my site hanging on to the last frame for a moment before looping.

14

Hi @dankanvis,

never had any issue with videos, always loaded pretty fast I must say but I never delivered really long videos. I’ve been told by cloudinary backend engineers that we might want to apply “eager transformation” on long videos instead of the regular lazy url transformation. Have a look: https://support.cloudinary.com/hc/en-us/articles/202521172-Should-I-use-lazy-or-eager-transformations-

1 Like
15

I appreciate the info. I’ll talk a look. Thank you.

16

I still cannot get the video the render properly on mobile. Desktop, tablet and landscape work but not mobile. I’m using the padding-top (56.25%) and the custom style code.

17

For mobile, this worked for me:
.w-background-video { height: 100%!important; }
was 500px by default

1 Like
18

Hi,
I’m completely new to all this, what codes exactly do I have to place and where? I copied and pasted this and did not get any results. Do I have to add this code to code that should have been placed prior?

19

Just wanted to say thank you. Cloudinary is killer! I have heard of it in the past, hadn’t used it though, and after being frustrated with Webflow for the past 3 hours trying to embed Vimeo/YouTube/Background Video/etc. – all coming with their own limitations. Cloudinary worked without a hitch!

Thank you :slight_smile:

1 Like
20

Amazing great solution!

If the width is 100% then the ‘16’ out of the :9 ratio is preserved

now just convert the 9 to VH units (56.25)

you can repeat this for any ratio

1 Like