Mídia - Vídeo

Última atualização: 14 de julho de 2024

Tópicos:

Criado para:

Iniciante
Intermediário
Usuário

Use o tipo de conteúdo Vídeo para adicionar um vídeo hospedado no YouTube ou no Vimeo ao Page Builder estágio. É fácil incorporar vídeos em uma página ou bloco ou em descrições de produtos e categorias.

Vídeo na home page da loja

NOTE

Se você estiver fazendo alterações significativas no conteúdo de Page Builder, é recomendável aumentar o Tempo de Vida da Sessão de Administrador para evitar que a sessão atinja o tempo limite enquanto você trabalha.

Caixa de ferramentas Vídeo

Caixa de ferramentas de vídeo

Ferramenta

Ícone

Descrição

Mover

Move o vídeo para outra posição no palco.

(rótulo)

Video

Identifica o contêiner de conteúdo atual como um vídeo. Passe o mouse sobre o contêiner de imagem para ver a caixa de ferramentas.

Configurações

Abre a página Edit Video, na qual você pode alterar as propriedades do vídeo e do container.

Ocultar

Oculta o vídeo atual.

Mostrar

Mostra o vídeo oculto.

Duplicar

Faz uma cópia do vídeo.

Remover

Exclui o vídeo do estágio.

NOTE

Os elementos ocultos são armazenados no banco de dados e invisíveis para os clientes. No entanto, esses elementos são visíveis para mecanismos de pesquisa e outros bots que rastreiam seu site. Eles também são retornados como parte do conteúdo, se solicitado por meio de uma chamada de API com um atributo de invisibilidade, a menos que você os remova do estágio.

Adicionar um vídeo

Antes de começar, navegue até o vídeo YouTube ou Vimeo que deseja incorporar e copie o link.

Como alternativa, você também pode copiar um link direto para um arquivo de vídeo válido. Consulte Configurações básicas de vídeo para obter links válidos.
No Administrador Commerce, retorne ao espaço de trabalho Page Builder ao qual deseja adicionar o vídeo.
No painel Page Builder, expanda Media e arraste um espaço reservado Video para o estágio.
Passe o mouse sobre o contêiner de vídeo para exibir a caixa de ferramentas e escolher o ícone Configurações ( ).
Para Video URL, cole a URL do vídeo que você copiou.

A URL do vídeo Page Builder usado neste exemplo é: https://www.youtube.com/watch?v=Y0KNS7C5dZA.
Para limitar o Maximum Width do vídeo, insira a largura máxima em pixels.

Se estiver em branco, o vídeo terá a largura permitida pelo contêiner, permitindo margens e preenchimento.
No canto superior direito, clique em Save para aplicar as configurações e retornar ao espaço de trabalho Page Builder.

Alterar configurações de vídeo

Passe o mouse sobre o contêiner de vídeo para exibir a caixa de ferramentas e escolher o ícone Configurações ( ).
Modifique as configurações de acordo com as seguintes seções:
- Básico
- Avançado
No canto superior direito, clique em Save para aplicar as configurações e retornar ao espaço de trabalho Page Builder.

Configurações básicas de vídeo

Para alterar o vídeo atual, atualize o Video URL.

Insira um URL de vídeo válido. Os URLs válidos do vídeo podem ser links para:
- Vídeos do YouTube: https://youtu.be/CoDhMRUUjeI
- Vídeos do Vimeo: https://vimeo.com/190156113
- Arquivos de vídeo válidos (.mp4 é recomendado): https://myvideos.com/spiral.mp4
Para alterar a largura permitida para o vídeo na vitrine, insira a nova Maximum Width em pixels.

Se estiver em branco, o vídeo estende a largura total do contêiner, menos espaço para margens e preenchimento.
Para iniciar o vídeo automaticamente depois que a página for carregada, defina Autoplay como Yes.

Se a reprodução automática estiver definida como Yes, o vídeo será silenciado na reprodução de acordo com a política. No entanto, mesmo com essa configuração, os dispositivos móveis não podem reproduzir automaticamente seus vídeos. Para obter mais informações sobre essas políticas, consulte os seguintes recursos do desenvolvedor:
Se a reprodução automática estiver definida como No, o vídeo será reproduzido somente sob demanda do usuário.

Advanced

Para controlar o posicionamento horizontal do vídeo no contêiner, escolha um Alignment:

Opção
Descrição
Default
Aplica a configuração padrão de alinhamento especificada na folha de estilos do tema atual.
Left
Alinha o conteúdo ao longo da borda esquerda do contêiner de vídeo, com permissão para qualquer preenchimento especificado.
Center
Alinha o conteúdo no centro do contêiner de vídeo, permitindo qualquer preenchimento especificado.
Right
Alinha o conteúdo ao longo da borda direita do contêiner de vídeo, com permissão para qualquer preenchimento especificado.

Defina o estilo Border que é aplicado aos quatro lados do contêiner de vídeo:

Opção
Descrição
Default
Aplica o estilo de borda padrão especificado pela folha de estilos associada.
None
Não fornece nenhuma indicação visível das bordas do contêiner.
Dotted
A borda do contêiner aparece como uma linha pontilhada.
Dashed
A borda do contêiner aparece como uma linha tracejada.
Solid
A borda do contêiner aparece como uma linha sólida.
Double
A borda do contêiner aparece como uma linha dupla.
Groove
A borda do contêiner é exibida como uma linha com ranhura.
Ridge
A borda do contêiner aparece como uma linha estriada.
Inset
A borda do contêiner aparece como uma linha interna.
Outset
A borda do contêiner aparece como uma linha de saída.
Se você definir um estilo de borda diferente de None, conclua as opções de exibição de borda:

Opção
Descrição
Border Color
Especifique a cor escolhendo uma amostra, clicando no seletor de cores ou inserindo um nome de cor válido ou um valor hexadecimal equivalente.
Border Width
Insira o número de pixels para a largura da linha de borda.
Border Radius
Insira o número de pixels para definir o tamanho do raio usado para arredondar cada canto da borda.
(Opcional) Especifique os nomes de CSS classes da folha de estilos atual para aplicar ao contêiner de vídeo.

Separe vários nomes de classe com um espaço.
Insira valores, em pixels, para que Margins and Padding especifique as margens externas e o preenchimento interno do contêiner de vídeo.

Insira cada valor correspondente no diagrama do contêiner de vídeo.

Área de contêiner
Descrição
Margins
A quantidade de espaço em branco aplicada à borda externa de todos os lados do container.
Padding
A quantidade de espaço em branco aplicada à borda interna de todos os lados do contêiner.

Mover um vídeo

Passe o mouse sobre o contêiner de vídeo para exibir a caixa de ferramentas e escolher o ícone Mover ( ).
Selecione e arraste o vídeo para a nova posição, logo abaixo da diretriz vermelha.

Remover um vídeo do palco

Passe o mouse sobre o contêiner de vídeo para exibir a caixa de ferramentas e escolha o ícone Remover ( ).
Quando for solicitada a confirmação, clique em OK.

recommendation-more-help