Background Video Display

I was trying to use the background video feature on Webflow but was having some difficulty. I uploaded a video to play, but every time I publish my site the video gets zoomed in. I have attached two different pictures showing what I am talking about. I also I wanted to change the size of the video on my page but was having difficulties with that as well. I wanted to shrink the size of the video without cutting out the content playing on my video. Can you please help me fix the two things I am having trouble with?

Here is my read-only link- https://preview.webflow.com/preview/nathnaelsolomon?preview=7177d1e06d35d9e9bae5c672d19ef582


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

Hi @ns23, when using background video, the video will never resize smaller than the smallest physical dimension, the background video works like a background image set to cover.

The video in question is 1280px wide, so the minimum size to show the full video contents using the background video will be 1280 and currently you are using it in a 940px container.

One solution is to use a tool like handbreak.fr to resize the video to 940px wide so that it shows on desktop (will still crop on mobile)

Second solution would be not to use a background video widget, but instead use a custom html video embed, which will allow you to style the embed responsively, see here: [Tutorial] Responsive Video using HTML Embed

When the size of the background video widget goes below the actual physical size of the video, the video will zoom/crop.

I hope this helps.

3 Likes

Thank you for your help!

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.