Nuxt ScriptYoutubePlayer behavior help
Hey everyone, i'm trying to incorporate ScriptYoutubePlayer into my app and am running into an issue I can't figure out.
https://scripts.nuxt.com/scripts/content/youtube-player
The component is working correctly, but if I have multiple instances of the component, clicking on one video will cause all other videos to load as well. I can't figure out why this is happening. anyone have any ideas?
I've tried putting keys, ID's on them with no luck. It's like clicking one iframe causes all others to render for some reason.
Nuxt Scripts
YouTube Player · Nuxt Scripts
Show performance-optimized YouTube videos in your Nuxt app.
7 Replies
Hi, can you please confirm which version of Nuxt Scripts you're using.
If you're not using the latest, please make sure you update
I am on the latest, just updated and still have this issue @harlan
oh I see, I thought you meant they were autoplaying
so basically they all load in because the youtube js is loaded in, we could technically keep the poster until the user interacts with it but i don't think this is the ideal default behavior
so would need some extra prop to delay the poster being replaced until the script trigger 🤔
also if you style the poster similarly to the final loader it will look less obvious, just a small flash of content
Yeah, I think unfortunately the flash of content is what my client dislikes
Are they all loading because the first click loads the YouTube js, and any other I guess videos in the site will then also load because one script is loaded? I guess I’m confused why they are all loading but I seem to remember that being a thing with iframes of the same origin
Or same script or something
Also just realized you’re the creator? Very cool! I love the concept
yes this is correct, loading in the js SDK will trigger all of the videos to load in, so the work around is just to hide the actual youtube video and only show poster until you want it shown
thanks 🙂
I can investigate a bit further around this and see if there's a prop or something I can introduce to make it a better UX
gotcha. Yeah I mean, is there a way to not have the wrapper that wasn't clicked to still display the placeholder image? i guess it's fine if it loads the script behind it
Not at the moment as far as I know
An alternative UX choice you may consider is opening the clicked video in a modal
or make the clicked video full width
and it will make it less obvious also