Okay, watch this I scroll down and the video starts playing I scroll back up and it reverses
It's just so satisfying to feel like you're in control of the scrolling pace and here comes the website content.
Once I found out that this is possible without a plugin in Elements I had some fun and here is an example of Sean Claude Van Damme going into a split.
I don't want to hurt him so I won't scroll all the way down.
So here comes the website content.
Let me go ahead and show you how to do this inside Elementor for free and without a plugin.
As you can see, we only have the elements are hidden up here.
I won't be showing you how to rebuild that because I just want to go straight into the juicy stuff.
So let's start off by creating a virgin container.
make sure that the container has a width of 100% like this.
Then you'll need to search for the video widget and drag it in because you can actually use any video you like.
I'll just go ahead and find the video I want to use the watermelon video and upload my video and just find it here.
Just make sure it's an mp4 file or else it won't work.
Now look for video options and find mute.
Make sure it's toggled on.
And down here you can see we have a player control.
But this will ruin the entire experience if you could see that.
So make sure it's deactivated here.
Then let's just take a look at it in full width and you can see we have this wide padding around it.
To remove that, you will have to go to into the container advanced and click here on padding and remove them.
Let's just incorporate the header by removing the background and just giving it a minus margin of 120.
So now in full width it look like this.
By the way, a quick cycle.
time you can also just download this as a ready-to-import template and you will also get the truck website.
You just import it directly into Elementor like this.
I'll show you how to do it later in the video.
Okay now it's time for the secret ingredients in order for this scroll trigger video to work.
We need to use a few lines of code but don't worry you don't need to know
anything about code you just need to insert it but before we do that I just
forgot one very important thing and that is that you have to click on the container and set this height to 500.
and set it to view height.
So now we have a lot of white space we can scroll upon.
Okay, go ahead and search for the HTML widget and insert it down here.
In the description of this video, you'll find this line of code.
just go ahead and find this copy button and copy it then go back to Elementor and insert it
okay so that's it for now just click update and let's go ahead and view it in a new
tab let's test it out okay so the video is playing on scroll but
we have all of this white space so that's because we need this section to be
sticky so to achieve that you go back to Elementor and navigate to the container
or actually the video and go into advanced and scroll down and look for this motion effects.
Here you can activate sticky at the top and also remember to activate this state in column.
Let's now go ahead and update and refresh.
Now it's sticky but two important things you need to know before ending this.
One, if you have more content on the page, which I had in the final result, you need to
do one thing or else it won't be visible.
So if I go back to Elementor editor, you can now see that I have added some content down here.
But this content is behind the video,
so you need to activate the set index by clicking on the container of the video,
setting this to 0 and go back to the other container or your other content on the webpage and set this to 1.
So now when I refresh this page,
I'm going you can see if I scroll down the other content appears okay and the other thing
you need to know which is probably the most important thing is that this
video won't work if you don't have a 30 frame per second video and you don't
need to know what that means just know that inside of this link you can down
I'll just quickly show you how to do this if your video is lacking so click on this and drag it in and down here
You set the frame rate to 30 and just click
Now you will get a converted file with the right frame per second video that you can upload to
your website and it won't be lacking.
If you want to save time and just import this website I built as a ready to make template go to the link in the description and click I want this
then insert your email here and click get and here you go.
Now you have an downloadable file you can just add in click on the template and go to
and drag in the file you just received and insert it.
There you go, now you have the final website imported.
