passing variables to a script tag breaks Youtube iframe API

[wicked kindle]

The only way I've been able to get this iframe to render a video is with a hard coded array of videos Ids. Soon as I either import or pass with define:vars the iframe breaks. Can someone tell me what Im doing wrong. I'm new to development and might be just doing something dumb. I'm Using astro v2 https://okizoocrew.com/

[rustic sparrow]

@wicked kindle Do you see any useful error?

[wicked kindle]

@rustic sparrow Hi, Happydev. I really appreciate any help on this. 🙏🏽 Thank you in advance.

So haven't gotten any errors, this is all I see. From rendered to not rendered.

[rustic sparrow]

Importing modules from the public directory isn't allowed in vite (I found it work in some cases smh)
You could try moving your modules in the src folder

[rustic sparrow]

Can you check the browser console?

[wicked kindle]

nothing related showing in the browser console.

I moved the module into src, still not working

what's weird is soon as I start to write code in the script tag that has anything to do importing variables, the iframe breaks.

[rustic sparrow]

If you want to import source files in the script tag you shouldn't have any attribute on it
See https://docs.astro.build/en/reference/directives-reference/#isinline

[wicked kindle]

Thank you for providing the link to the documentation. It seems that the YouTube API will not display the video if the "is:inline" attribute is missing.

I did end up getting it to work by passing the variable through HTML data attributes. Feels the dirty method but its working after parsing back into an array.

[rustic sparrow]

Glad you got it to work 🙂

Happy coding!