DocumentaçãoCommercePage Builder

Mídia - Vídeo

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

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
Ícone Mover {width="25"}
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
Ícone de configurações {width="25"}
Abre a página Edit Video, na qual você pode alterar as propriedades do vídeo e do container.
Ocultar
Ícone Ocultar {width="25"}
Oculta o vídeo atual.
Mostrar
Mostrar ícone {width="25"}
Mostra o vídeo oculto.
Duplicar
Ícone duplicado {width="25"}
Faz uma cópia do vídeo.
Remover
Ícone Remover {width="25"}
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

  1. 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.

  2. No Administrador Commerce, retorne ao espaço de trabalho Page Builder ao qual deseja adicionar o vídeo.

  3. No painel Page Builder, expanda Media e arraste um espaço reservado Video para o estágio.

    Arrastando um espaço reservado de vídeo para o estágio {width="600" modal="regular"}

  4. Passe o mouse sobre o contêiner de vídeo para exibir a caixa de ferramentas e escolher o ícone Configurações ( Ícone Configurações {width="20"} ).

  5. 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.

  6. 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.

  7. 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

  1. Passe o mouse sobre o contêiner de vídeo para exibir a caixa de ferramentas e escolher o ícone Configurações ( Ícone Configurações {width="20"} ).

  2. Modifique as configurações de acordo com as seguintes seções:

  3. 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

  1. 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

  2. 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.

  3. 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

  1. 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:

    Cor da Borda {width="600" modal="regular"}

    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

  1. Passe o mouse sobre o contêiner de vídeo para exibir a caixa de ferramentas e escolher o ícone Mover ( Ícone Mover {width="20"} ).

    Movendo um vídeo {width="500" modal="regular"}

  2. Selecione e arraste o vídeo para a nova posição, logo abaixo da diretriz vermelha.

    Usando a diretriz vermelha para colocar o vídeo {width="500" modal="regular"}

Remover um vídeo do palco

  1. Passe o mouse sobre o contêiner de vídeo para exibir a caixa de ferramentas e escolha o ícone Remover ( Remover ícone ).

  2. Quando for solicitada a confirmação, clique em OK.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d