Fixed Position for Video Background for Specific Section only

[timurklc]

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

I tried adding this code to CSS of that section and it just applied the video to background of whole website instead of specific section.

To give you a background on how I managed to get video background: I created a liquid called video-background and added a code from a YT video which created a block called ''Video Background''.

So my question is how I can apply this to specific section? Also my website is: Cardast.com

Kindly understand that I have zero knowledge of web development, zero knowledge of coding. I started working on creating my first website (this one) just a few days ago. 

Thank you.

[deepaksharma]

Hi @timurklc 

can you elaborate more what type of specific section you need? if reference website then it will be more easy for me to understand

[timurklc]

Sadly I do not have a reference website but basically I'd like my video to have a ''fixed position''.  I applied ''fixed position'' code to the Shopify store now, so you can check what I mean. So I want this video to be shown at the top of the page (where the button and text is) instead of whole landing page

[deepaksharma]

remove the position fixed, and use absolute or relative or any other, or just remove the position line

[timurklc]

Guys. If you remove the ''position:fixed'' it removes whole idea of having ''position:fixed''. It has to be fixed so it works and functions like that.

Otherwise I can remove the whole code and get the result you are talking about. Which is no function of ''position:fixed''

[PageFly-Amelia]

Hello @timurklc 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can fix the issue you are encountering by removing the "position: fixed" attribute. This will ensure that the video is only displayed within the relevant section and not across the entire page as it currently is.

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[timurklc]

I feel like this is going to remove the "background fixed scroll" feature.

If we remove the custom CSS it gets back to normal already but without fixed feature

[PageFly-Amelia]

Hello @timurklc 

The position: fixed property is used to position an element relative to the viewport, making it stay fixed on the screen and not scroll with the rest of the content.

[timurklc]

Exactly. But I'm trying to make it not for whole page, just for specific section. My issue is not with this feature, this is the effect I want. The issue is that this feature applies to whole page instead of one section

[PageFly-Amelia]

Hello @timurklc 

I understand your concern, and I have a solution that might help you. Here are some steps you can try:

Step 1: Online Store -> Themes -> Edit Code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

<style>
.gradient {
   position: relative;
}
</style>

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[timurklc]

It didnt have any effect. Maybe because I used ''Custom CSS'' inside the customizer of Shopify. Also, I would like it to have an effect like ''fixed'' so it feels like it's scrolling together but I want it to end where the section ends so it doesnt affect speed and/or background of my website