Scroll-controlled video playback (fixed until end)

General topics
1

Hi everyone,

I’m trying to create an effect where a video plays as the user scrolls down — but the video stays fixed on screen while playing. Only after the video is fully played should the user be able to scroll past it and see the content below.

Right now, as I scroll down, the video plays and scrolls away at the same time — which breaks the intended effect.

What I’d like to achieve:

  • The video should stay pinned/fixed to the screen while the user scrolls.
  • The scroll should control the playback progress of the video.
  • Once the video is fully played (scroll-complete), the user should continue scrolling and see the rest of the page.

I’m embedding a Vimeo video and using Readymag’s code widget.
I tried using fixed position and scroll animations, but it’s not behaving as expected.

Has anyone managed to build something similar? Would love to see examples or hear about possible workarounds — maybe with the Shots widget or custom code?

Thanks in advance!

1 Like
2

Hey eduardo! I was facing same issue here, but I have just realized how to make it!

You have to use the widget “scroll with fixed position”, its the last one in preset shots. Then, you just need to add a delay opacity animation on scroll, calculating how many pixels your video lasts to end up, and adding all the rest of your page content afterwards this amount of pixels (dont forget to add this space). After the video ends, it will dissapear and the user will be able to navigate the rest of the page.

Hope this works for you!