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:
I resolved by using Z1 for video and Z2 for content. Create the following.
- FLEX CONTAINER - = Flex Center Vertical
- BG VIDEO MASK - Z=1; expand position = full size container
- CONTENT BLOCK - Z=2, in front of Video
IN BG Video mask, define the HEIGHT and 100%W of the VIDEO itself
In FLEX CONTAINER, define the TPOP MID OR BOTTOM position
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/