Pular para o conteúdo
Faculdade PhorteDesign System

VideoPlayer

Em andamento

Vídeo do YouTube que só carrega quando alguém pede: mostra a capa com um botão de reproduzir e, no clique, troca pelo player do youtube-nocookie.com já tocando, com o foco nele.

Função
Conteúdo
Também chamado de
vídeo, player, youtube, embed
Mora em
app/components/molecules/VideoPlayer.tsx
Última mudança
2026-10-01
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Interativo, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Interativo
  2. Proporções
  3. Capa própria

Quando usar

Para um vídeo de apresentação do curso ou depoimento, no meio do conteúdo.

Faça

  • Passe o title do vídeo: ele vai para o nome do botão ("Reproduzir o vídeo: …") e do player.
  • Aceite o videoId ou a URL inteira do YouTube — o componente extrai o id.
  • Use thumbnailUrl quando a capa automática do YouTube não servir; sem ela, a capa grande, e a média se a grande falhar (E72).

Evite

  • Deixar o title no padrão ("Vídeo"): quem ouve não sabe o que vai tocar.
  • Vários na mesma dobra: cada um é um player do YouTube ao ser aberto.

Quando não usar. Para vários depoimentos em vídeo passando, use o VideoTestimonialCarousel. Para vídeo de fundo decorativo, nenhum player.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Moldura — Na proporção do `aspectRatio`, cantos `rounded-2xl`, borda e sombra.
  2. Capa — Imagem decorativa (`alt=""`) sob um véu escuro.
  3. Botão de reproduzir — Círculo vermelho de 64px (80px a partir de 768px) com o ícone de play; o botão real cobre a capa inteira.
  4. Player — O `<iframe>` do YouTube sem cookies, depois do clique.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
CapaImagem com véu; no hover, a imagem aproxima e o círculo cresce — só com movimento liberado (E72).
FocoAnel ring-ring de 4px em volta da capa inteira.
TocandoO player no lugar da capa, com reprodução automática e o foco.
Proporçãovideo 16:9 (padrão), wide 21:9 ou square 1:1.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Antes do cliqueNada do YouTube é carregado além da imagem da capa.
Capa grande que não existeTroca pela média (hqdefault), que todo vídeo tem (E72) — conferido no teste da ficha. A cinza de antes fazia o player parecer quebrado.
Clique ou Enter na capaTroca pelo player já tocando e leva o foco para ele — medido: o foco passa ao <iframe>.

Relacionados