Help with background video and element positioning

Design help General
1

I am a creative consultant with advanced skills in design. I’m relatively new to web design, but I’ve been getting requests for websites and have always wanted to add that to my service offerings. Webflow seems to be the perfect solution to build my custom vision for clients without being a coding whiz. I currently have 2 website jobs and I am using a free Webflow account to get the first one going. I’ve watched at least 50+ videos on the Webflow University on Youtube, and the possibilities are very exciting.

The bad news is - so far, the designer seems pretty glitchy. My first task is to build a splash page with a background video to enter the site. The video is actually just a logo on a white background with a video masked inside the logo. It is not a large file - only 2MB. My first issue was with the video not showing up - the designer would only show the default background video icon when the element was clicked on. Now, if the video element is clicked on, or if the edges of the viewport are grabbed and sized (in the designer or in preview), the video preview snaps back to full size. With this issue it is impossible to size the element or even discern its actual size, or to layout the video element, and especially to check responsiveness. I’ve tried refreshing the designer, restarting Safari and using a different browser (discovered Firefox is not supported). I’ve also cleared the project elements and classes multiple times, but it only seems to get worse when I attempt to re-build. I’ve been on this one task for 2 days and I am now concerned that I may have to use a different builder. I really don’t want to, but other little glitches only add to the frustration. Copy and Paste key commands do not seem to work for me - I get the clunk sound from my Mac when I try it. Also it seems as though the color eye dropper used in the tutorials is not available for me in the designer.

When I discovered Webflow it was as if all my prayers about web design had been answered. Unfortunately, I am not sure at this point if I can commit to a paid plan if I can’t get through my first webpage.

2

Hi Neal,

Can you send a share-only link to your project, so I/we can take a look and assist?

How is the logo being added, is it a floating transparent PNG over the video element? Is the video an item you dragged into Webflow and converted, or an embedded

There are likely a handful of reasons why you’re experiencing issues, let’s take a look and see if we can figure it out.

Steve

energi.design

Steve HolmesCreative Director

3

Steve,

Here is a link:
https://preview.webflow.com/preview/the-marsupials?preview=e6884c0cb39a5ae9aee02fd10f193fdf

The artwork is not being built in Webflow, this is a .mov that was simply uploaded into the background video component, which I am trying to position to act as if it is not a background video but a splash screen logo. I was not sure how else to do this since you can only use the background video or linked video features. You can see if you try to click the video element or adjust the viewport in preview that it snaps to full size within its boundaries.

4

Hi Neal,

Thanks for sending the link. The problem is that the background video element will always want to scale to fill its parent element, unless it’s styled or contained — this video element therefore wants to scale to fit the body, as that’s its parent element. You also had a class on the video with a fixed width and height, etc, and that was causing the sizing/non-scaling issue.

All you need to do is remove the class from the video element, add a container to the page, and drop the video element inside the container.

That will control the width and horizontal centring of the video, but it’ll be at the top of the page. If you then also want the whole splash area to centre vertically and horizontally on the page, it needs a quick reorganisation and styling.

Add a class to the main container, set it to Flex with Vertical Layout, centre children vertically and horizontally, and a 100vh height.

465×1280 88.1 KB

This nicely centres the video element vertically and horizontally on the full height of the window. To get the buttons in that same block so they all centre vertically together, you can’t use another container because they can’t be nested. Pull the buttons out of that splash container and delete it.

Select the main container again, add a new div (inside the container, below the video element), drop the two buttons into that div, and style the div as Flex also, horizontal layout, centred.

476×1010 41.1 KB

Navigator should look like this:

Hope this helps :slight_smile:

And to answer the question:

To Webflow or not to Webflow?

Definitely, always, to Webflow :slight_smile:

Cheers,

Steve

energi.design

Steve HolmesCreative Director

1 Like
5

Thank you much for the reply Steve.
I understand what you are saying. The set up you outlined is something I’ve tried, and tried again since your post. Since the video is a logo on a white background, it is inteded to sit in white space as if it were an image. It seems to me that this is still not allowing me to scale the video the way I want to - the video does not respect sizing and responsive scaling the same way as an image would. It may be that the background video component is not intended to be scaled in the same way that an image would? But I have no option to upload a native video file on its own without it being a background - the only other video option is to embed a player from Vimeo or Youtube. I may have to try your idea of a transparent PNG on top of a background video.

I am still also experiencing a sudden snap-like size shift of the video symbol, where it blows up in the designer (without changing any settings) when I select the video element, or any element for that matter.

On the other notes: I downloaded Google Chrome and found that copy+paste works in that browser. Also, the color eyedropper is available to me in the Chrome browser. These two features are not available for me in the Safari browser.

6

Hi Neal,

It is possible to have an element retain its proportions if it’s styled with a class. But as I found on a recent project, this is sometimes problematic in Firefox… so what you could try is dropping your PNG image into a div, apply a class to the image itself and set the width to something like 50vw so it’s always half the width of the viewport, and with height at auto the image will retain its proportion. Give the image an Absolute position within the div (0,0 is fine) and then drop the background video element into the same div, and set it to absolute also. You can then position the video behind the image, and the video will scale to fit the container div, whose size is actually controlled by the div :slight_smile:

7

@energidesign

Thanks for your input. I ended up using a video because I did not want the transparent PNG to look like a mask, and having a layer scaling over a background video would be noticeable. My work around was to find the appropriate width for the video file itself. You can see the updated version (links below).

The website is basically done but I do have an idea to implement an interaction on one of the pages, which I am not really sure how to set up. Maybe you can help. :slight_smile:

Question is here: Help With Scroll Interactions - Section Scrolling Over Section

Here is my site Read-Only: https://preview.webflow.com/preview/the-marsupials?preview=99fa04172f119fa742908e315e6114ff

Here is my site Published: http://the-marsupials.webflow.io/