How do you center a background Video

Michael1 · November 21, 2019, 7:21pm

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

Pablo_Cortes · November 21, 2019, 7:28pm

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.

energidesign · November 21, 2019, 7:28pm

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

Michael1 · November 21, 2019, 8:27pm

That does not seem to work any other suggestons.

Pablo_Cortes · November 21, 2019, 9:36pm

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?

Michael1 · November 21, 2019, 9:42pm

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

Pablo_Cortes · November 21, 2019, 9:52pm

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.

Michael1 · November 24, 2019, 5:04pm

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

Michael1 · November 24, 2019, 5:05pm

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

Pablo_Cortes · November 25, 2019, 8:22pm

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.

Biba_Rey · July 25, 2022, 1:35pm

Hi there on the topic of videos, how do I centre a video once i embed the code in the box? When you choose the option to insert a video it gives you <> to insert the scrips, but its not so much as a ‘box’ or container that I can resize or position… if that makes sense?