Share Posted November 26, 2021 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 More sharing options...
Share Posted November 26, 2021 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted November 26, 2021 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 More sharing options...
Share Posted November 26, 2021 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 More sharing options...
Author Share Posted November 26, 2021 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 Link to comment Share on other sites More sharing options...
Share Posted November 26, 2021 It sounds like a reloading issue as described here. 1 Link to comment Share on other sites More sharing options...
Solution Solution Share Posted November 26, 2021 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(). 1 Link to comment Share on other sites More sharing options...
Author Share Posted November 30, 2021 Thanks for help! Link to comment Share on other sites More sharing options...
Share Posted March 12 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. Link to comment Share on other sites More sharing options...
Share Posted March 13 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 More sharing options...
Share Posted March 15 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 More sharing options...
Share Posted March 15 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now