I’m currently doing an experimental mentoring/learning project which requires me to embed YouTube videos on my page. I would like to get my demo on the cloud by the end of the month but I’m still manoeuvring around the API, sveltekit logic of things.

I’ve come to find out that getting the player controls from YouTube API is quite challenging, maybe partly due to my lack of experience in svelte and web tech.

I’ve found some cases in which my player disappear or not load, in particular:

Upon URL redirection to page, the player will not load unless refreshed.

I used to await/promise to catch window.onYoutubeIframeAPIReady, but it in turn can load player upon URL redirection but not upon refresh.

I feel like I’ve covered quite a bunch of concepts trying to resolve this, but digitally it feels like i’m going 3 steps forward and 2 steps back.

Now, I’m wondering that if the SSR rendering is the cause of my misery, because the refreshes does not catch the wait and I’ve read a bit about combining both styles.

Also, the Svelte YouTube API is outdated, but I can research its dependencies, which seem to be more used by other frameworks.

================

So, TLDR:

What solution would be preferred from a software architect’s point-of-view? Should I just keep sticking to getting this API to work or simply get duration and time elapsed by preventing player control from hiding and listening to it?

Should I get into figuring out the SSR/SPA mixture now, or would it be a mess later on?

I also find myself having a hard time experimenting and testing packages and languages. How best would someone using sveltekit do so? Are there convenient web interpreters for sveltekit like jsfiddle or should i simply create a new project?