Mídia - Vídeo

Use o Vídeo tipo de conteúdo para adicionar um vídeo hospedado em YouTube ou Vimeo para o 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 página inicial da loja {width="700" modal="regular"}

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

Caixa de ferramentas Vídeo

Caixa de ferramentas Vídeo {width="600" modal="regular"}

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 Configurações {width="25"}
Abre a Edit Video ​página, onde é possível 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 Duplicar {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 YouTube ou Vimeo vídeo 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 links válidos.

  2. No Commerce Administrador, volte para a guia Page Builder espaço de trabalho ao qual você deseja adicionar o vídeo.

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

    Arrastar 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 Configurações ( Ícone Configurações {width="20"} ) ícone.

  5. Para Video URL, cole o URL do vídeo que você copiou.

    O URL do Page Builder o vídeo usado neste exemplo é: https://www.youtube.com/watch?v=Y0KNS7C5dZA.

  6. Para limitar o Maximum Width do vídeo, digite 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 Page Builder espaço de trabalho.

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 Configurações ( Ícone Configurações {width="20"} ) ícone.

  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 Page Builder espaço de trabalho.

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 o novo 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 para Yes.

    Se a reprodução automática estiver definida como Yes, o vídeo é 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 é reproduzido somente sob demanda do usuário.

Advanced

  1. Para controlar o posicionamento horizontal do vídeo no container, escolha uma 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 Border estilo 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 da 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 dos CSS classes na 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 o Margins and Padding para especificar as margens externas e o preenchimento interno do container 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 Mover ( Ícone Mover {width="20"} ) ícone.

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

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

    Usar a diretriz vermelha para inserir 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 escolher Remover ( Ícone Remover ) ícone.

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

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