Hello I am working on a site where the home page has a video background. The client is wanting the parallax effect - the content of the page scrolls over the video and the video stays static/in place. I have seen many ways to do this with images, but nothing on for video. Does anyone have a fix or solution they have found?

Hi, did you find a solution to this? I'm attempting the same thing now with no luck.

Did anybody find an answer to this? 

On 6/2/2023 at 6:47 PM, destineesherri said:

Hi, did you find a solution to this? I'm attempting the same thing now with no luck.

On 5/22/2023 at 5:14 PM, brennakd said:

Hello I am working on a site where the home page has a video background. The client is wanting the parallax effect - the content of the page scrolls over the video and the video stays static/in place. I have seen many ways to do this with images, but nothing on for video. Does anyone have a fix or solution they have found?

Also looking for a solution to this! @tuanphan are you able to assist? 🙏🏻

On 2/6/2024 at 5:30 PM, websitebuilder12345 said:

Also looking for a solution to this! @tuanphan are you able to assist? 🙏🏻

Can you share link to your site?

@tuanphan I'm new to squarespace.  I've worked in wordpress using Divi Theme Builder most of my life and within that framework setting up parrallax for video backgrounds was rather easy, but as I'm leaning into squarespace I'm noticing it only offers parrallax for background images.   

I'd love to be able to make my background video's parrallax.  Is there any CSS coding you can provide me with? I really appreciate your help.  My website link is http://www.reliefpastors.com

I look forward to your response.

Thank you.

On 2/11/2024 at 1:59 PM, rhett247 said:

@tuanphan I'm new to squarespace.  I've worked in wordpress using Divi Theme Builder most of my life and within that framework setting up parrallax for video backgrounds was rather easy, but as I'm leaning into squarespace I'm noticing it only offers parrallax for background images.   

I'd love to be able to make my background video's parrallax.  Is there any CSS coding you can provide me with? I really appreciate your help.  My website link is http://www.reliefpastors.com

I look forward to your response.

 

Thank you.

You mean top banner video?

@tuanphan Yes, that is correct.  🙂

I would like to add parrallax to the top "banner" video as well as the "section" videos I currently have. 

The site is a work in progress, as I'm building it from scratch, but the home page is almost complete.

The url is: http://www.reliefpastors.com

I'm finding that you are a wealth of knowledge on these forums when it comes to squarespace css, html, etc...  I sincerely appreciate your willingness to help us all.

Sincerely,

@rhett247

On 2/8/2024 at 10:19 AM, tuanphan said:

Can you share link to your site?

@tuanphan Thanks for the response. The site is https://www.singingwithnightingales.co.uk/what-is-swn. Looking to make the section background video parallax if possible! Thank you.

My client is asking for the same effect if possible? Not sure why parallax on a video background or section isn't an option? Is it because it's movement upon movement?

Any update on some css to make this happen would be REALLY appreciated! @tuanphan 🙂 TIA

On 2/11/2024 at 1:59 AM, rhett247 said:

@tuanphan I'm new to squarespace.  I've worked in wordpress using Divi Theme Builder most of my life and within that framework setting up parrallax for video backgrounds was rather easy, but as I'm leaning into squarespace I'm noticing it only offers parrallax for background images.   

I'd love to be able to make my background video's parrallax.  Is there any CSS coding you can provide me with? I really appreciate your help.  My website link is http://www.reliefpastors.com

I look forward to your response.

 

Thank you.

On 4/14/2024 at 8:40 AM, MakingWaves said:

My client is asking for the same effect if possible? Not sure why parallax on a video background or section isn't an option? Is it because it's movement upon movement?

Any update on some css to make this happen would be REALLY appreciated! @tuanphan 🙂 TIA

On 4/14/2024 at 8:40 AM, MakingWaves said:

My client is asking for the same effect if possible? Not sure why parallax on a video background or section isn't an option? Is it because it's movement upon movement?

Any update on some css to make this happen would be REALLY appreciated! @tuanphan 🙂 TIA

Tuan figured it out in another thread. Posting it here for visibility:

"First, you add a Section with Video Background

Next, use this code to Custom CSS. Replace article>section:first-child with section id

use this free tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff"

article>section:first-child {
    height: 100vh !important;
    position: sticky;
    top: 0;
    padding: 0 !important;
}
article>section:first-child video {
    position: fixed !important;
    top: 0 !important;
}
article>section:nth-child(n+2) {
    z-index: 99999 !important;
}

I cant get this working.

Well, i CAN get it working, but the problem is i lose all dividers in squarespace.

What kinda code do i need to add to include the dividers shown in second screenshot?
 

visualimpression.vip

I tried using the code and it worked in a clunky way.
But it failed when I needed the effect on 2 videos.

I researched and found the latest way of doing animations and Parallax Effect with a new technology.
Here is the source code https://github.com/sorcamarian/squarespace-tricks/tree/main/Animations/Background Video Parallax

Live demo - desktop - https://abzglobal.net/parallax-demo

I also created a video about it