> ## 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.

# 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.