How Can I Create A Fixed Attachment Video Background. Help Please!

Hi there! I am trying to figure out how I can make the video background to stay fixed as you can do with images. I have tried tons of CSS and keep failing.

The video I am looking to make a fixed background video attachment is located on the homepage of the site at the very top. https://milehighexchangors.com/

To make the css easier I gave the row containing the video a class of ‘my-row’. I feel like it should be simple css such as I have below, however it is not working. Please Help!

#my-row.fl-row-bg-video .fl-row-content {

background-attachment: fixed;

}

Thanks!

I know there are some CSS whizes that this is cake to lol

I don’t see a video there now, but if you want to do a full background of video:

video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}

Hi!

So there is a video background playing behind the words " JOIN THE MOST AMAZING R/E EXCHANGE GROUP IN COLORADO" at the very top of https://milehighexchangors.com/ just below the header.

Thanks again for any help. I think the part causing trouble may have to do with fixing the div and the video. Not sure though.

Thanks for any help!

You have to use position:fixed to get the div to stay put.

Hi again!

So everytime I set the div as fixed position it pulls up the divs beneath it like shown in this screenshot. Even when i set the div beneath its position to fixed it still floats up.

Thanks again for all your help!

With a fixed position is doesn’t take up any space so you’ll have to add margin to the proceeding elements so they stack properly starting out. I believe then they will overlap as you scroll. That was want you wanted?

Ok! You are amazingggg! Completely forgot to add margins. The last issue I am having a problem with is the z-index on these two divs. I want the bottom div (my-roww) to cover up the top div (my-row) on scroll, whereas currently the top div (my-row) covers the secondary on scrolling. I set the second dive to 999 and it still isnt working. I also tried setting the first dive to a negative value but then it was just a white div.

Here is my Css so far:

#my-row{

position:fixed;
width: 100%;
z-index: 1 !important;

}

#my-roww{
z-index: 999 !important;
}

Thanks again for your help!

Ok I lied. I got that part fixed because the secondary div wasnt positioned as fixed as well. Noooow the issue I have is with the footer not being attached. I am sure this is because it is normally positioned relative in the theme and the rest are fixed, whats an easy way to fix that one?

I suppose a better question would be to ask if I now have to position every element as fixed or if there is a way to make it still relative to the dive above.

Thanks!

I lied again lol! Figured it out. Thanks for allllll of your amazing help!

1 Like

So glad you got it figured out!!

I am new to video editing and still can’t understand how to do this. Can somebody tell me please?

I’ve been in a similar spot, trying to figure out how to keep a video background fixed on my website. I struggled with CSS too and couldn’t get it to work right. During my search for a solution, I stumbled upon Movavi, which wasn’t directly related to CSS fixes but ended up being super useful for other video needs. What was really handy was discovering through Movavi how to convert a video to mp3; it was something I needed for another project where I wanted just the audio from a video clip. Movavi made that process really simple and quick, which was great because it saved me a ton of time and hassle.