From 1da1228282b3fa82e2db38a2047170c4d632407b Mon Sep 17 00:00:00 2001 From: SerKo Date: Mon, 2 Sep 2024 23:36:31 +0800 Subject: [PATCH 1/6] fix: update youtube placeholder default image url --- src/runtime/components/ScriptYouTubePlayer.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/runtime/components/ScriptYouTubePlayer.vue b/src/runtime/components/ScriptYouTubePlayer.vue index 75a7e064..8b745172 100644 --- a/src/runtime/components/ScriptYouTubePlayer.vue +++ b/src/runtime/components/ScriptYouTubePlayer.vue @@ -119,7 +119,7 @@ const rootAttrs = computed(() => { }) as HTMLAttributes }) -const placeholder = computed(() => `https://i.ytimg.com/vi_webp/${props.videoId}/sddefault.webp`) +const placeholder = computed(() => `https://i.ytimg.com/vi/${props.videoId}/hqdefault.jpg`) if (import.meta.server) { // dns-prefetch https://i.vimeocdn.com From 147351d75293bf11c3d4396b651023bdacfaaabf Mon Sep 17 00:00:00 2001 From: SerKo Date: Thu, 5 Sep 2024 02:26:47 +0800 Subject: [PATCH 2/6] chore: add a youtube video needs fallback thumbnail to playground --- .../pages/third-parties/youtube/nuxt-scripts.vue | 11 +++++++++++ 1 file changed, 11 insertions(+) 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' +} From f580c817474a616fe7959f80ee4c0a44f84981fb Mon Sep 17 00:00:00 2001 From: SerKo Date: Thu, 5 Sep 2024 02:27:57 +0800 Subject: [PATCH 3/6] feat: add fallback placeholder thumbnail for `ScriptYouTubePlayer` --- src/runtime/components/ScriptYouTubePlayer.vue | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/runtime/components/ScriptYouTubePlayer.vue b/src/runtime/components/ScriptYouTubePlayer.vue index 17cfd356..b4c602bb 100644 --- a/src/runtime/components/ScriptYouTubePlayer.vue +++ b/src/runtime/components/ScriptYouTubePlayer.vue @@ -120,7 +120,9 @@ const rootAttrs = computed(() => { }) as HTMLAttributes }) -const placeholder = computed(() => `https://i.ytimg.com/vi/${props.videoId}/hqdefault.jpg`) +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) }) From fd6b0e27bfb9ff446dd85df47896a93fec142285 Mon Sep 17 00:00:00 2001 From: harlan Date: Fri, 7 Feb 2025 15:55:04 +1100 Subject: [PATCH 4/6] feat(youtube): `thumbnailSize` prop --- .../content/scripts/content/youtube-player.md | 18 ++++++++++++-- .../third-parties/youtube/nuxt-scripts.vue | 2 +- .../components/ScriptYouTubePlayer.vue | 24 +++++++++++++++---- 3 files changed, 37 insertions(+), 7 deletions(-) diff --git a/docs/content/scripts/content/youtube-player.md b/docs/content/scripts/content/youtube-player.md index 6bb64135..ed41cb06 100644 --- a/docs/content/scripts/content/youtube-player.md +++ b/docs/content/scripts/content/youtube-player.md @@ -105,9 +105,23 @@ To modify this behavior, you can set the `host` prop to `https://www.youtube.com ``` -#### Eager Loading Placeholder +### Placeholder -The YouTube Player placeholder image is lazy-loaded by default. You should change this behavior if your video is above the fold +The YouTube Player placeholder image is 1280x720 webp that is lazy-loaded by default. + +To modify the placeholder size you can set the `thumbnailSize` prop, if you'd prefer +to use a `jpg` you can pass the `webp` prop as `false`. + +```vue + +``` + +If you need fine control over the placeholder you can set `placeholderAttrs` prop or completely override it using +the `#placeholder` slot. + +#### Eager Loading + +You should change this behavior if your video is above the fold or consider using the `#placeholder` slot to customize the placeholder image. ::code-group diff --git a/playground/pages/third-parties/youtube/nuxt-scripts.vue b/playground/pages/third-parties/youtube/nuxt-scripts.vue index 4e9d5230..a324b99f 100644 --- a/playground/pages/third-parties/youtube/nuxt-scripts.vue +++ b/playground/pages/third-parties/youtube/nuxt-scripts.vue @@ -18,7 +18,7 @@ function changeVideoFallback() { Multiple YouTube Players
- +