Neverending loading spinner on blocked youtube videos

[katywings]

Current Behavior:

Youtube videos that are blocked in the target country result in a neverending loading spinner and overlay which makes it impossible to click the "Watch on Youtube" link.

Expected Behavior:

The loading spinner and overlay should hide, when the "Video unavailable" screen is showing up.

Steps To Reproduce:

Its a bit hard to share a generic reproduction as this widely depends on your country, but the general idea is:

1. Find a Youtube video that is blocked in your country
2. Embed the blocked video via Vidstack

Reproduction Link: https://www.youtube.com/watch?v=xvFZjo5PgG0

Yupp 🥴, this issue literally was noticed on a 7s Rickroll Meme video, which is blocked in south america...

Environment:

Anything Else?

https://github.com/user-attachments/assets/d99da6ba-98c3-4071-8fb6-df65415d22be

[brendanahart]

Has anyone figured out a solution to this? I'm getting the issue for some videos on my website. I'm wondering if vidstack throws an error that we can use so that I can then display a thumbnail which will take people to an external link to watch the video?

Here is the code that I have for error handling but I am unable to catch the error ` const handleError = (event: any) => { console.error("Vidstack Player Error:", event.detail);

if (props.isYoutube && isNative) {
  setIsVideoUnavailable(true);
}

} `

[brendanahart]

I commented my solution here!

https://github.com/vidstack/player/issues/1456#issuecomment-2434294352

This is now what I get if a youtube video is blocked and then clicking on that directs a user to a browser window where they can play the youtube video