Jump to content


Embedded youtube video and ScrollTrigger on page - 100s of requests slowing page

Moderator Tag
Go to solution Solved by braunsock,

Recommended Posts

I'm may be missing an extra step. I'm using ScrollTrigger on a page with a Youtube embed. The inspector > network displays 100s of these requests that are taking up loading time (see attached). My codepen demonstrates this (though not as extreme).


Am I missing a precaution mixing these things (ScrollTrigger + Youtube)?

Screenshot 2023-03-13 at 11.24.21 AM.png

See the Pen oNPXKgZ by dan_default (@dan_default) on CodePen

Link to comment
Share on other sites

That's because pinning requires that ScrollTrigger wrap your pinned element with a pin-spacer <div> and whenever there's a .refresh(), it must REMOVE all pin-spacers and implement things again top-to-bottom in order to ensure the proper flow of everything and CSS styles are maintained. If you've got an <iframe> in the pinned element, browsers reload that when the element is reparented. 


Solution: define your own pinSpacer element so that ScrollTrigger doesn't have to create its own and reparent anything: 

See the Pen JjaLjeO?editors=1010 by GreenSock (@GreenSock) on CodePen


Does that help?

  • Like 1
Link to comment
Share on other sites

  • Solution

Thank again Jack. In researching, I found a utility that also solved the problem while making my page more performant, eliminating the need for a Youtube iframe slowing down my page: https://github.com/paulirish/lite-youtube-embed


2 birds!

  • Like 3
Link to comment
Share on other sites

Ah this is handy, thanks for popping back!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.