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

Customization How To
1

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!

2

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

3

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;
}

4

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!

5

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

6

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!

fixed pos div
fixed pos div1920×1080 541 KB

7

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?

8

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!

9

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?

10

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!

11

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

1 Like
12

So glad you got it figured out!!

13

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