Skip to main content
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

<video-player
  img-src="{{ product.video.thumbnail }}"
  video-url="{{ product.video.url | youtube_url }}"
/>
Exemplo com URL fixa:
<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

PropriedadeTipoObrigatóriaValor padrãoDescrição
imgSrcStringURL da imagem de thumbnail exibida antes do clique. Usa placeholder quando não informada.
videoUrlStringURL 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.