# Vídeo incorporado (YouTube ou Vimeo) (`video`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Capa do projeto com botão de play; o player do YouTube (sem cookies) ou do Vimeo só carrega no clique. Página fica leve e o visitante não é rastreado antes de querer ver.

- **Categoria:** Mídia
- **Equivalente no Elementor:** Vídeo (Video) com Sobreposição de Imagem (Image Overlay)
- **Arquivos:** `video.html`, `video.css`, `video.js`
- **Precisa de JavaScript:** sim (inicia por `data-ds-video`)

## Quando usar
- Vídeo de vendas (VSL), apresentação, depoimento em vídeo, aula aberta

## Quando não usar
- Vídeo ambiente sem som (use hero com vídeo)
- Vídeo que precisa tocar sozinho

## Variações
- **Horizontal 16:9:** classe ds-video
- **Vertical 9:16 (Reels, Shorts):** classe ds-video--vertical
- **YouTube ou Vimeo:** data-ds-video-provedor="youtube" ou "vimeo" e data-ds-video-id

## Conteúdo esperado
- Código do vídeo
- Imagem de capa do projeto (não usa a miniatura do YouTube, para não depender de servidor externo antes do clique)
- Título do vídeo

## Acessibilidade
- Botão de play com o título do vídeo como nome
- Player recebe title e foco depois do clique
- Sem JS fica um link para o vídeo
- Peça legendas no próprio YouTube ou Vimeo

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/video/video.css">
<script src="componentes/video/video.js" defer></script>
```

Tokens do contrato usados: `--ds-cor-destaque`, `--ds-cor-fundo-marca`, `--ds-cor-sobre-destaque`, `--ds-cor-sobre-marca`, `--ds-curva`, `--ds-duracao`, `--ds-espaco-1`, `--ds-espaco-3`, `--ds-espaco-4`, `--ds-raio-lg`, `--ds-raio-sm`, `--ds-sombra-md`, `--ds-tamanho-pequeno`.