Video play with scrub doesn't work in the middle of other content

[LSchneiderman]

I've seen lovely videos playing with scrub when the video is the only thing on the page, like this:

See the Pen ExZGrbZ by wisearts (@wisearts) on CodePen

 

But when the video is surrounded by other content on a page -- as it will inevitably be -- how do you get the video play on scrub AND hold off the  other content from scrolling over it until it's done playing?

See the Pen ZEqeJWx by lschneiderman (@lschneiderman) on CodePen

[GreenSock]

That's just a CSS issue - you were pinning the <video> element itself which you set to position: absolute INSIDE of a container <div> that's affecting layout. So when ScrollTrigger added a bunch of pinSpacing to the bottom of the <video>, it made no difference in the layout. You need to pin the container element so that the pinSpacing actually pushes other stuff down the page: 

See the Pen PoypQxd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I also corrected and simplified some of the code. You should only listen for the metadataloaded or dataloaded events if it's not already loaded (it might be cached in which case it'd skip that code completely). 

 

I hope that helps. 

[LSchneiderman]

Thank you, @Jack!! That did the trick!