diff --git a/playground/pages/third-parties/youtube/nuxt-scripts.vue b/playground/pages/third-parties/youtube/nuxt-scripts.vue index e535b265..0d2b3580 100644 --- a/playground/pages/third-parties/youtube/nuxt-scripts.vue +++ b/playground/pages/third-parties/youtube/nuxt-scripts.vue @@ -6,6 +6,10 @@ const videoid = ref('d_IFKP1Ofq0') function changeVideo() { videoid.value = 'N8siuNjyV7A' } + +function changeVideoFallback() { + videoid.value = 'jNQXAC9IVRw' +} diff --git a/src/runtime/components/ScriptYouTubePlayer.vue b/src/runtime/components/ScriptYouTubePlayer.vue index 60dcfd34..b4c602bb 100644 --- a/src/runtime/components/ScriptYouTubePlayer.vue +++ b/src/runtime/components/ScriptYouTubePlayer.vue @@ -120,7 +120,9 @@ const rootAttrs = computed(() => { }) as HTMLAttributes }) +const fallbackPlaceHolder = computed(() => `https://i.ytimg.com/vi/${props.videoId}/hqdefault.jpg`) const placeholder = computed(() => `https://i.ytimg.com/vi_webp/${props.videoId}/sddefault.webp`) +const isFallbackPlaceHolder = ref(false) if (import.meta.server) { // dns-prefetch https://i.vimeocdn.com @@ -146,7 +148,7 @@ if (import.meta.server) { const placeholderAttrs = computed(() => { return defu(props.placeholderAttrs, { - src: placeholder.value, + src: isFallbackPlaceHolder.value ? fallbackPlaceHolder.value : placeholder.value, alt: '', loading: props.aboveTheFold ? 'eager' : 'lazy', style: { @@ -154,6 +156,12 @@ const placeholderAttrs = computed(() => { objectFit: 'contain', height: '100%', }, + onLoad(payload) { + const img = payload.target as HTMLImageElement + if (img.naturalWidth === 120 && img.naturalHeight === 90) { + isFallbackPlaceHolder.value = true + } + }, } satisfies ImgHTMLAttributes) })