Streaming live at 10am (PST)

How do you center a background Video

I want to center a background video in Webflow so that the video stays centered in the sldier or div block on each breakpoint.

Hello @Michael1,

You can give the background video element a 100% width and height of the container you are using and give the container a vw and/or vh values so that it responsive according to your breakpoints. I hope this helps.

I’d suggest putting the background video in a div container and setting that container to Flex with vertical and horizontal centering. The default for background video is a top left anchor point, so this would “remove” that and give you more control over positioning.

Steve

That does not seem to work any other suggestons.

Hey @Michael1, do you know the size of your video? and, why do you want to center a background video? could you share your read only link?

Actually i don’t want to center it I want it to anchor or align to the left so it appears centered.

Hey @Michael1,

can you share a screen shot or something similar, I can’t picture what you want to accomplish, and why you want to center or align a background video that typically take the full width of the screen, and if it doesn’t you could just use a video element.

The problem is that the film does not stay centered after display on desktop or on other devices example tablet etc.

like i sort of need the film to stay anchored to the left so that the content is always visable.

Ok got it, @Michael1. So this issue its been around for a long time and it doesn’t have a definite solution, you could use costume code and set the break points yourself for each device based on the aspect ration of your video. But that would take a lot of code and a lot of time, so my advice would be to give your background video element a min-width and a min-height of 100% and see how that works. Let me know how it goes.