Mídia - Vídeo
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.
Caixa de ferramentas Vídeo






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:
-
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
- Vídeos do YouTube:
-
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:- Política de reprodução automática do Vimeo
- Política de reprodução automática do Google (Chrome/YouTube)
- Política de reprodução automática para vídeos locais
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:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto 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:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto 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:table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto 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.
table 0-row-2 1-row-2 2-row-2 layout-auto Á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.