feat(youtube): thumbnailSize prop with fallback support (#376)

Co-authored-by: SerKo <[email protected]>

Author: harlan-zw

.github/workflows/ci.yml

@@ -17,9 +17,6 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
         name: Install pnpm
-        with:
-          version: 9.15.2
-          run_install: false
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:

.github/workflows/release.yml

@@ -16,10 +16,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
-        name: Install pnpm
-        with:
-          version: 9.15.2
-          run_install: false
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:

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
 <ScriptYouTubePlayer video-id="d_IFKP1Ofq0" :player-options="{ host: '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
+<ScriptYouTubePlayer video-id="d_IFKP1Ofq0" thumbnail-size="maxresdefault" />
+```
+
+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

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'
+}
 </script>
 
 <template>
@@ -14,7 +18,7 @@ function changeVideo() {
       Multiple YouTube Players
     </NuxtLink>
     <div>
-      <ScriptYouTubePlayer :video-id="videoid" above-the-fold>
+      <ScriptYouTubePlayer :video-id="videoid" above-the-fold class="w-[640px] h-[360px]">
         <template #awaitingLoad>
           <div class="text-lg top-5 absolute left-10">
             Nuxt Nation 2023: Daniel Roe - A New Nuxt - Release of Nuxt v3.8
@@ -31,5 +35,12 @@ function changeVideo() {
     >
       change video
     </UButton>
+
+    <UButton
+      class="ml-5"
+      @click="changeVideoFallback"
+    >
+      change video needs fallback
+    </UButton>
   </div>
 </template>