Pular para o conteúdo
Faculdade PhorteDesign System

VideoTestimonialCarousel

Em andamento

Seção escura "O que nossos Alunos Dizem.": cartões com a capa do vídeo em cima e, embaixo, cinco estrelas, nome, curso e citação. O play fica no próprio cartão — o clique troca a capa pelo player do YouTube ou do Vimeo ali mesmo, na proporção do vídeo, vertical ou horizontal (E132). Todos os cartões têm a mesma altura (E160): a moldura da capa é uma só por seção. Não é carrossel. Os depoimentos vêm por depoimentos (E75).

Função
Campanha (marketing)
Também chamado de
depoimentos em vídeo, vídeos de alunos, histórias de sucesso, shorts, reels
Mora em
app/components/organisms/marketing/VideoTestimonialCarousel.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.

1280px, em tamanho real

Pular a prévia
Variante Padrao, 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. Padrao
  2. Horizontais
  3. Sem vídeo
  4. Teste: a mesma altura no celular, linha a linha

Quando usar

Em página de campanha, com depoimentos gravados em vídeo — inclusive os verticais, feitos para o celular.

Faça

  • Passe depoimentos, com videoUrl do YouTube ou do Vimeo em quem tiver vídeo: só esses ganham o play.
  • Marque formato: "vertical" no vídeo vertical do Vimeo e no do YouTube que não esteja num endereço /shorts/ — o Vimeo não diz a proporção pelo endereço.
  • Use capas (thumbnail) que aguentem o recorte em 9:16 quando a seção mistura vídeo vertical e horizontal: a moldura é a da seção, e a capa é recortada para caber.

Evite

  • Publicar com os depoimentos de exemplo (os que vêm sem prop).
  • Endereço de outro lugar em videoUrl: não há player para incorporar, e o play vira um link em nova aba.

Quando não usar. Para um vídeo só, grande, use o VideoPlayer. Para depoimentos em texto, o TestimonialCarousel.

Anatomia

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

  1. Chapéu e título — "Histórias Reais de Sucesso" (com o ícone de vídeo só quando há vídeo, E75) e o `h2`.
  2. Capa — A imagem decorativa (`alt=""`) sob um degradê de `--ink`, num CardMedia na moldura da seção (E160): 9:16 se algum depoimento for vertical, 16:9 se todos forem horizontais.
  3. Play — A capa inteira é o botão "Assistir depoimento de <nome>"; o círculo de 80px em `--primary` é o desenho. O anel de foco claro fica no círculo.
  4. Player — Depois do clique: o `iframe` do YouTube (`youtube-nocookie.com`) ou do Vimeo (`dnt=1`), titulado "Depoimento de <nome>", ocupando a área da capa.
  5. Informações — Embaixo da capa, no fluxo: cinco estrelas, nome (`h3`), curso (Badge) e a citação — o vídeo tocando não cobre nada.

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
PadrãoUma coluna no celular, duas a partir de 768px, três a partir de 1024px.
VerticalO player em 9:16, ocupando a moldura: o YouTube Shorts pelo endereço, o resto por formato — testado na ficha.
Horizontal16:9, o padrão; numa moldura vertical, o player fica centrado em 16:9, com faixa escura em volta — testado na ficha.
Formatos misturadosA mesma altura em todos (E160, revisão 4): uma moldura por seção, os cartões esticam até a linha, e as linhas da grade têm a mesma altura (auto-rows-fr) — no tablet e no celular também. Testado na ficha, com citações de tamanhos bem diferentes.
TocandoO player no lugar da capa, com o foco; os outros cartões continuam com o botão — testado na ficha.
Endereço não reconhecidoO play vira link: "Assistir depoimento de <nome> (abre em nova aba)" — testado na ficha.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
PlayTroca a capa pelo player, que já começa a tocar, e leva o foco para ele — até a revisão 3, abria o vídeo numa aba nova (E132).
EndereçosYouTube: watch?v=, youtu.be/, embed/ e shorts/. Vimeo: vimeo.com/<id>, com o hash de vídeo não listado, e player.vimeo.com/video/<id> — testado na ficha.
PrivacidadeNada do YouTube nem do Vimeo carrega antes do clique; depois, o YouTube sem cookie de rastreamento e o Vimeo com "não rastrear".

Relacionados