Streaming live at 10am (PST)

Video Background auto-zooming issue

I have a video that I would like to use as a video background, but the element’s default behavior is to zoom-in on the video. Here is what I mean - notice the what the full-size thumbnail of the video looks like on the right:

When I manually size the height, the width becomes correct, but the top and bottom of the video are cut off. See here:

My goal is to have the full video displayed with the width always 100% of the screen. I’ve already tried putting the image in a flex container centered vertically, which was suggested in other posts on the forum.

Here’s my site - I appreciate any help!
https://preview.webflow.com/preview/mojo-co?utm_source=mojo-co&preview=2d149d886ad6e7ce3316ed3eff5d4aa6

Hey Brooks,

Welcome to the forum :smiley:

  1. Share a read only link with questions like this one, so we can take a look under the hood and understand the problem.
  2. Background video elements are tricky. They tend to stretch all over the screen. The best practice for that is to create a version of the video specially for small screens and mobiles with the right crop.

Hi avivtech,

Thanks! I updated my original post to include the read-only link.

The problem is the full-size video doesn’t display correctly on the desktop screen either, so unfortunately I don’t think resizing it manually is going to solve my problem.

Any other ideas?

This is the advice I’ve tried (unsuccessfully) from other posts:

1.

I resolved by using Z1 for video and Z2 for content. Create the following.

BODY

  • Section
    • FLEX CONTAINER - = Flex Center Vertical
      • BG VIDEO MASK - Z=1; expand position = full size container
      • CONTENT BLOCK - Z=2, in front of Video
        • Content
        • Content
        • Content
        • Content

IN BG Video mask, define the HEIGHT and 100%W of the VIDEO itself

In FLEX CONTAINER, define the TPOP MID OR BOTTOM position

2.

3.

By essence, a background image or video is meant to fill a space entirely, hence being cropped left/right or top/bottom. Usually, when you want something to never be cropped, you’re using a simple image or an embedded video.

The background video is only following the behavior of its own “box”, or the one of its parent. So if you want the video to be always shown entirely, it can’t be depending of an element that’s, for example, 100% height or 100VH.

With the bg video element, it’s difficult to do because the element itself doesn’t know the ratio of the video. So basically, inside of your full screen section, you need to place a div that is always in 16/9th ratio (I assume your video has a HD format), that’s centered in height and 100% width.

Crafting such a 16/9th container is tricky but totally possible with CSS, in Webflow, without custom code.

I made a quick site to show how to make a square or any other specific ratio container (div): http://css-square.webflow.io/

Your video’s proportions are very unique, so in this case I suggest you use a custom 3rd party video player.

The video dimensions are 9:16, which is the size of a mobile screen.

I’m trying to avoid using Shopify if I don’t have to, but there’s a plugin on their app store that can do it, worst-case scenario. Unfortunately, nothing seems to be working to do it on Webflow.

bump on this +1…

9:16 is not something usual… 16:9 is.
Why not use an external player?

Hello guys,

I’ve been having this very issue!
To solve it I was just using Gifs bassically, the main drawback being that they are definitely heavier. I really hope they solve this :smiley: