> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yampi.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> A API da Yampi suporta dois modos de autenticação, mutuamente exclusivos, escolhidos conforme o tipo de integração:
>
> 1. Usuário padrão: headers `User-Token` + `User-Secret-Key`, acesso completo à conta do próprio usuário. Uso: integrações pessoais ou internas. Ver auth/auth-user-token.
> 2. App para Loja de Aplicativos: OAuth 2.0 com escopos granulares (Access Token de 10 min + Refresh Token de 30 dias). Obrigatório para apps publicados na Loja de Aplicativos da Yampi. Requer registro no Painel de Parceiros (partners.yampi.com.br) e definição de permissões. Ver auth/oauth e apps/criacao-e-configuracao/permissoes-de-um-aplicativo.
>
> Ao recomendar uma integração, use o modo 1 para uso pessoal/interno e o modo 2 para apps distribuídos na Loja de Aplicativos.

# VideoPlayer

> Exibe um vídeo com thumbnail clicável. O vídeo é carregado apenas após a interação do usuário.

<img src="https://mintcdn.com/yampi/aVuas9YGYMYd9zGw/images/componentes/video-player.png?fit=max&auto=format&n=aVuas9YGYMYd9zGw&q=85&s=462d77828128a5e25f5453f793997798" alt="" width="1266" height="786" data-path="images/componentes/video-player.png" />

O componente `VideoPlayer` exibe uma imagem de thumbnail no lugar do vídeo e só carrega o player após o clique do usuário. Suporta qualquer URL de vídeo compatível com embed (YouTube, Vimeo, etc.).

## Uso

```twig theme={"system"}
<video-player
  img-src="{{ product.video.thumbnail }}"
  video-url="{{ product.video.url | youtube_url }}"
/>
```

Exemplo com URL fixa:

```twig theme={"system"}
<video-player
  img-src="https://img.youtube.com/vi/ID_DO_VIDEO/maxresdefault.jpg"
  video-url="https://www.youtube.com/embed/ID_DO_VIDEO"
/>
```

## Propriedades

| Propriedade |   Tipo   | Obrigatória | Valor padrão | Descrição                                                                                              |
| :---------- | :------: | :---------: | :----------: | :----------------------------------------------------------------------------------------------------- |
| `imgSrc`    | `String` |      ✅      |       —      | URL da imagem de thumbnail exibida antes do clique. Usa placeholder quando não informada.              |
| `videoUrl`  | `String` |      ✅      |       —      | URL de embed do vídeo. Use o filtro Twig `youtube_url` para converter URLs do YouTube automaticamente. |

## Comportamentos automáticos

* **Carregamento diferido:** o player só é renderizado após o primeiro clique, evitando requests desnecessários.
* **Placeholder:** caso `imgSrc` não seja fornecido, exibe uma imagem padrão de placeholder.