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?
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:
@dennismars may I ask if you know how change a CMS video into full hight?
Your recommended settings work perfectly when i have a video embed in a normal section, but when i have the video embed inside a CMS collection (inside the rich text field), it only resizes the CMS field to full screen but not the rich text field/video embed
…do i have to set the Rich Text to Relative/100vh and write the absolute/100%H directly into the html embed code? Or is there another reason why the video doesn’t fill the full screen
Off hand I’d say you’d want to make sure the wrapper/list/and item all have width set to 100vw too.
If we want to be technical though, I’d only have the outer sections (section and wrapper) get vw and vh, and the inner sections (list/item/embed video) would have both height and width set to 100%.
Be careful to make sure you are only using VH for height and VW for widths.
The rule is if you want to absolutely position an element, it needs to have a parent (or ancestor… basically any element that “contains it”) that has something other than static positioning. So you don’t need to add relative positioning to the list or anything else. All the children can be absolute (only if you’re doing something special though, like sticking them in one place no matter what).
I’m not entirely sure what you’re trying to achieve above, I kind of see what you’ve got going but I may need you to explain your goal a little differently. Will check in tomorrow and hopefully some of what I’ve said helps!
