Jump to content
Search Community

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

RDima test
Moderator Tag

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

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

  • 1 year later...

Iframe not able to load youtube video or autoplay in mobile or tablet, not sure if I'm doing any thing wrong, it works fine in desktop.

 

Here is the CodePen for your reference, apologies I couldn't add the proper stylings in the code, 

See the Pen LYBJMNM by Praveen_Saboji (@Praveen_Saboji) on CodePen

 - For Tablet, Mobile I'm not able to pause or autoplay doesn't work even if I send autoPlay=1, Not sure why this is happening, please help in understanding if I'm missing anything. Thanks.

youtube.PNG

Link to comment
Share on other sites

Hi,

 

I just tested this on an iOS and Android devices and the iframes are actually loading but not playing immediately as you mention. I couldn't tell you about auto-play though since I'm not at all familiar with Youtube's API.

 

Perhaps you could check on Stackoverflow and see how to workaround this:

https://stackoverflow.com/questions/48399390/youtube-embed-autoplay-on-mobile

 

Happy Tweening!

Link to comment
Share on other sites

On 3/14/2023 at 2:46 AM, Rodrigo said:

Perhaps you could check on Stackoverflow and see how to workaround this:

https://stackoverflow.com/questions/48399390/youtube-embed-autoplay-on-mobile

and also I am not able to click on the controls(play, pause seek) of the youtube in tablet or mobile, Do I need fix from animation end or youtube end I'm in dilemma, please throw some light if you are known to these issues.

 

@Rodrigo

Link to comment
Share on other sites

Hi,

 

Sorry, I don't have any experience whatsoever with Youtube on mobile devices, but what normally happens when I tap on a youtube video on a browser in my phone, it opens the Youtube app. Again I think is a question best suited for Stackoverflow than these forums.

 

Hopefully another user with more experience in this subject can chime in and provide some help.

 

Happy Tweening!

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.
×
×
  • Create New...