Streaming live at 10am (PST)

Background video responsive size

#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.

On this URL you can see the video in action, and the problem as well if you resize your window.
My Webflow project

The problem is, 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.

I’d really appreciate any help and ideas you have.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#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.

Display Background Video Smaller for Mobile
#3

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

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%);

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 writepadding-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 !

#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:

1 Like