Prefer lite-embed-vimeo

harlan-zw commented 5 months ago

When using the VimeoEmbed component we should be providing the end user with the most performant / privacy solution out of the box. For Vimeo this seems to be the lite-vimeo-embed package.

We should allow the use of the main Vimeo script API via useScriptVimeo but if we want to embed we should use lite-vimeo-embed.

Ideally, we want the same functionality as https://lite-vimeo-embed.vercel.app/variants/pe.html. Notice on this site there are pre-connect tags in the head as well.

For end users who want more control, they can use something like https://github.com/dobromir-hristov/vue-vimeo-player.

harlan-zw commented 5 months ago

@darioferderber thoughts on this? Do you have capacity to work on it?

Would look like

<script lang="ts" setup>
deifneProps() // keep any props that we can still use
useNpmScript({
 packageName: 'lite-vimeo-embed', 
 type: 'module',
})
</script>
<template>
<lite-vimeo videoid="videoId" style="background-image: url('https://i.vimeocdn.com/video/810965406.webp?mw=1600&mh=900&q=70');">
  <div class="ltv-playbtn"></div>
</lite-vimeo>
</template>

harlan-zw commented 5 months ago

Actually the current implementation is good, we are just missing the thumbnail which I'll push up a fix for.

nuxt / scripts

Prefer lite-embed-vimeo #16