Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
RDima

Scroll trigger blocks (canceled) Youtube video (iFrame, Youtube API)

Go to solution Solved by GreenSock,

Recommended Posts

Good afternoon. I have the following problem. There is a block with a background video (Youtube, the necessary scripts are loaded using the Youtube API, then an iFrame block is inserted), it should have a parallax effect (when scrolling, the background from the video is fixed to a certain point, and the content moves up).

To fix the background video, I use Scroll Trigger. And in this case, it blocks the download of the video (the video then loads, but a lot of errors appear in the console). If you disable Scroll Trigger, then everything works.


Attached a link to codepen

See the Pen WNEVMML by Razdobudko (@Razdobudko) on CodePen

Link to comment
Share on other sites

Hi @RDima,

 

This is working for me!

There's definitely no way that scrollTrigger itself could block the video download - unless you're injecting the video with JS and have some errors in your code that are stopping that JS from running.

  • Like 1
Link to comment
Share on other sites

20 minutes ago, Cassie said:

Hi @RDima,

 

This is working for me!

There's definitely no way that scrollTrigger itself could block the video download - unless you're injecting the video with JS and have some errors in your code that are stopping that JS from running.

Yes, that's how the Youtube API works. In HTML, I create a div with the data-youtubeurl attribute. Then a new script tag with a link to the Youtube API is created in JS, then the YT.Player constructor is used, inserting an iFrame instead of a div

Link to comment
Share on other sites

Sure - but if this isn't working it won't be down to ScrollTrigger. ScrollTrigger is just tying animations to scroll, it certainly won't block requests to youtube.

Maybe try running the YouTube code before anything else. That may help - however, I'm not getting any errors and it's working a ok for me.

Link to comment
Share on other sites

If you open the console, the Network tab, you will see that the request for the id of the Youtube video with the status canceled, and the Initiator is ScrollTrigger. If you do not use Scroll Trigger in animation, then there is no such error

Screenshot 2021-11-26 16:47:25.png

Link to comment
Share on other sites

It sounds like a reloading issue as described here.

 

 

  • Like 1
Link to comment
Share on other sites

  • Solution

You might want to try just defining your own pinSpacer element (see the ScrollTrigger docs) so that ScrollTrigger doesn't need to remove/add its own pin-spacer element on refresh(). 

  • Like 1
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.
×