react-youtube icon indicating copy to clipboard operation
react-youtube copied to clipboard

Getting error trying to launch playVideo after onready fired

Open lofti198 opened this issue 3 years ago • 10 comments

Please check my code. This is very simple component containing just Youtube component. If I add button and launch video - it works completely OK. However I'm getting error trying to launch playVideo right after onready fired:

https://codesandbox.io/s/green-thunder-6omczn?file=/src/components/YoutubeErrorOnStart.js

Any ideas how to fix that?

lofti198 avatar Jul 30 '22 17:07 lofti198

On another related question here - what is the best practice to switch videoId (I mean to change current video for the component)? I mean that changing videoId property itself is not enough, because we need again to wait for player to become ready, and we again face the same issue I described before.

lofti198 avatar Jul 31 '22 04:07 lofti198

https://codesandbox.io/s/festive-framework-jgs692?file=/src/components/YoutubeErrorOnStart.js

ulizzle avatar Aug 04 '22 20:08 ulizzle

You don't need the onReady event to fire the video, that's handled by your useEffect. What yr missing is that you're not shadowing that videoID, so the component doesn't know when to re-render or whatevz. Whatever it does nowadays.

Read up on hooks and what lifecycle method's they replace.

ulizzle avatar Aug 04 '22 20:08 ulizzle

To switch videoID and have it autoplay this works as is. You don't need the player to become ready, cus that's what hooks do for you. The only reason you need the if conditional is because you set the player to start null. So you can get rid of that too.

If you have little prev/next arrows, you can set the videoId on click there. If you want to keep autoplay. you'll have to use onEnded.

You may need the onReady for other stuff, but not for this case. Also, avoid those _underScore vars, they're weird. That's not how you denote privacy in JS.

ulizzle avatar Aug 04 '22 20:08 ulizzle

That fragment wrapping the youtube component is unnecessary.

ulizzle avatar Aug 04 '22 20:08 ulizzle

Ok lol, you also don't need the player. What's the deal with that? Read the docs, notice what the target is.

ulizzle avatar Aug 04 '22 20:08 ulizzle

K, that should do it. Check the fork again. Bonus points if you tell me why I used closures in the callbacks instead of naming them with that ugly underscore prefix

ulizzle avatar Aug 04 '22 20:08 ulizzle

long story short: you dont need useEffect here.

ulizzle avatar Aug 04 '22 21:08 ulizzle

Well, the story goes a little further. Basically, the devil's best trick was convincing everybody that Zuckerberg isn't a Reptilian. "Move fast and break things". Get it? But no one had the balls to say: "Shut up nerd, which things?".

I would have bullied him out of college, but unfortunately for the world, he was safe up north in Massachusets and I would freeze to death there in the wintertime.

ulizzle avatar Aug 04 '22 21:08 ulizzle

God hates Harvard

ulizzle avatar Aug 04 '22 22:08 ulizzle