> For the complete documentation index, see [llms.txt](https://docs.grano.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.grano.app/conteudo/estrutura-e-conteudos/cards/video.md).

# Vídeo

Suporta as mesmas funcionalidades do card [**Imagem**](/conteudo/estrutura-e-conteudos/cards/imagem.md), porém com as especificidades a seguir apresentadas para configurar o *embed* de um vídeo *fullscreen*.

### <mark style="color:blue;">Estrutura Geral</mark>

Ao escolher esse tipo de card, além de todas as demais configurações prévias do card de **Imagem**, você poderá:

* Selecionar a <mark style="background-color:yellow;">**imagem**</mark> desejada para a "capa" do card, que será exibida com um botão de play em cima. O tamanho indicado é **1080x1920 pixels** no formato **jpg**.

<div align="left"><figure><img src="/files/JBPNtOXfiUSgRppp8okt" alt=""><figcaption><p>Campo "imagem"</p></figcaption></figure></div>

1. O tamanho da imagem será sempre com largura 100%, para preencher todo o Card.
2. Caso a altura da imagem passe do *container*, a aplicação adicionará um scroll automaticamente.
3. Se a imagem for menor que o *container*, ela será centralizada ao meio.

* Indicar a URL do **YouTube** ou **Vimeo** a ser aberta (em *fullscreen*) **após** o clique no botão de play.

<div align="left"><figure><img src="https://lh5.googleusercontent.com/AddEdM0hP7h_0nD2lrElV7iRtp-yWYwz3q_JB0kg69BBaCm2GVA5pf21rSVixZsC_DvtVjF4QrEJpnDzJv19vvRkuwY2ifkxvX_DcMAgYyPFh74xCEVBq50JFec020U2kaJcbLDQP37FHejGhGAT4c0" alt=""><figcaption><p>Campo para inserir URL do YouTube ou Vimeo</p></figcaption></figure></div>

Ao final, clique no botão **“Salvar”** para salvar todas as informações editadas.&#x20;

![](/files/X6MDbjt0QQ3vCSZqOmN6)

{% hint style="warning" %}
Na Grano, é necessário que você fique atento aos **tamanhos** dos arquivos e mídias no momento de fazer o cadastro dos cards.\
\
**Cards imagem = até 800 KB**\
**Gifs e Vídeos que são cadastrados direto na plataforma =** **até 200KB** - Esse peso não se aplica para vídeos que serão hospedados em outras ferramentas (Vimeo, Youtube, etc)\
**Sons = até 10 MB**\
\
**Lembre-se:** arquivos mais leves são preferíveis. Eles contribuem para o desempenho otimizado da plataforma e aprimoram a experiência do usuário. Antes de fazer o upload, confira o tamanho dos arquivos que você planeja enviar e realize os ajustes necessários. \
\
Se precisar reduzir o tamanho de um arquivo, ferramentas de compressão online gratuitas podem ser uma solução útil.
{% endhint %}

## <mark style="color:blue;">Como fica esse tipo de card?</mark>

Card **antes do clique**, com as devidas parametrizações.

![](https://lh6.googleusercontent.com/nmnhLhIjhqxgFmfoIfwqqxYzgEDuz-v4HxvlcTXjEyPrnNHO2_T31BxzjaVZH9ExY8RhAvUcNhsND66WkawJaYYs3XCvA2DuiFKq2wqudAX-Iv0C9sEj8G6rGDSl-TrQflL-cxCvRHI0U_h8kY3dm9k)

**Após clicar no play**, abre vídeo embed no formato *fullscreen*.

<div align="left"><figure><img src="https://lh3.googleusercontent.com/RXDlR0a3gKbCdIB3c0e-N3BiqVWAXRIjloh4PbBSriGnoEosZZByzBakyDnA4sGbl3fns-PlnXqZvg0aEAd0qDC5P-llEjqfKiK14oAKah9u7wRcgXYB_oDzmBnmS90qgkbJ_OiahDOR-21-sD0AD1U" alt=""><figcaption></figcaption></figure></div>

<mark style="color:orange;">**Importante:**</mark> Durante o confecção do layout da imagem de fundo do card, é crucial se atentar para a altura em que o botão "play" será posicionado, evitando que se sobreponha informações cruciais, como textos, por exemplo. Vale ressaltar que o botão "play" é adicionado automaticamente pela ferramenta e não é necessário incorporá-lo no design do layout.

**Exemplo Layout:**

<div align="left"><figure><img src="/files/Kr0QRFtbbZU5ms6Wb5zs" alt="" width="175"><figcaption></figcaption></figure></div>

**Como fica na plataforma:**

<div align="left"><figure><img src="/files/WqrTIk5MivCvOi3DpcqW" alt="" width="176"><figcaption></figcaption></figure></div>

**Margem:**

<div align="left"><figure><img src="/files/TvbES7JAxN7OEGti01gI" alt="" width="176"><figcaption></figcaption></figure></div>

***

> *© 2026 Grano Edtech LTDA. Todos os direitos reservados.*