This is a embarrassingly basic/beginner question 
So i have custom video code (full screen, absolute) and i want to swipe vertically from one video to the next like this:
The problem I’m stuck with:
Instead of having a scrollable one pager, all the videos are stacking/layering on top each other. I know that „Position:Absolute“ is responsible for stacking behaviour, but in the tutorial video I’m using as reference the videos are also set on „position: absolute“, yet its works in the tutorial with the scrolling down and seeing the videos one after another. Why?
Do i have to put them in different containers with other positioning?
Thanks!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
When you absolutely position things, the parent you want them to be positioned relative to needs to be something other than static. Right now all the videos are positioned absolutely to the body. There’s only one body so they all stack in the exact same place.
The class “Section 4” needs to be positioned relative. That won’t change anything besides the child embed-video and scroll trigger will know to be absolutely positioned relative to the all different sections (not the body). Then, if you want those videos to be full screen, you can set section height to 100vh (which is the fullsize of the screen). The videos being set to 100% will just inherit that.
So on Section 4 (or whatever your section class will be) add:
position → relative
height → 100vh
And you’ll be headed in the right direction…