YouTube placeholder cannot show some videos

[serkodev]

🐛 The bug

The current youtube placeholder url https://i.ytimg.com/vi_webp/${props.videoId}/sddefault.webp cannot show some videos.

vi_webp is not guaranteed to exist

https://i.ytimg.com/vi_webp/mJ8tq8AnNis/default.webp (video)

sddefault is not guaranteed to exist

https://i.ytimg.com/vi/jNQXAC9IVRw/sddefault.jpg (video)

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-lnbkmh?file=pages%2Findex.vue

🌈 Expected behavior

Expected the youtube placeholder can show all videos preview thumbnail image.

ℹ️ Additional context

No response

[codeflorist]

I'm doing this to get the best possible quality/format during static site generation:

const defaultPlaceholder = ref<string | null | undefined>(`https://i.ytimg.com/vi/${props.videoId}/sddefault.jpg`)
const asyncKey = `youtube-placeholder:${props.videoId}`
const { data } = await useAsyncData(
	asyncKey,
	async () => {
		const possibleURLs = [
			`https://i.ytimg.com/vi_webp/${props.videoId}/maxresdefault.webp`,
			`https://i.ytimg.com/vi/${props.videoId}/maxresdefault.jpg`,
			`https://i.ytimg.com/vi_webp/${props.videoId}/sddefault.webp`,
			`https://i.ytimg.com/vi/${props.videoId}/sddefault.jpg`,
			`https://i.ytimg.com/vi_webp/${props.videoId}/hqdefault.webp`,
			`https://i.ytimg.com/vi/${props.videoId}/hqdefault.jpg`,
			`https://i.ytimg.com/vi_webp/${props.videoId}/mqdefault.webp`,
			`https://i.ytimg.com/vi/${props.videoId}/mqdefault.jpg`,
			`https://i.ytimg.com/vi_webp/${props.videoId}/default.web`,
			`https://i.ytimg.com/vi/${props.videoId}/default.jpg`,
		]
		for (const urlToTry of possibleURLs) {
			const response = await $fetch.raw(urlToTry, {
				method: 'HEAD',
				mode: 'no-cors'
			})
			if (response.status === 200) {
				return urlToTry
			}
		}
	}
)
if (data.value) {
	defaultPlaceholder.value = data.value
}

But it does not work on the client due to opaque requests.