diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 0449913d..691926bb 100644 --- a/.github/workflows/ci.yml +++ b/.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: diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index f80da7a4..583324e5 100644 --- a/.github/workflows/release.yml +++ b/.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: 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 4f9e135a..a324b99f 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' +}