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:
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.
Share a read only link with questions like this one, so we can take a look under the hood and understand the problem.
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.
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/
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.
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
