Adobe Commerce

Como inserir vídeos na descrição do produto no Adobe Commerce e Magento

Tutorial ensinando a como inserir vídeos na descrição do produto no Adobe Commerce e Magento

No Magento, você pode adicionar vídeos de algumas formas na apresentação do produto, neste tutorial iremos abordar o método do iframe que trata de utilizar os recursos do youtube para processar seu vídeo e com isso evitar consumo de hardware de seu servidor. 

1 -> Acesse o painel Magento da sua loja;

2 -> Na grid de produtos selecione o produto que você deseja editar;

3 -> Clique em EDITAR, no produto prossiga até a seção DESCRIÇÃO LONGA

4 -> Agora você deve acessar o YouTube e selecionar o vídeo que você deseja inserir ao produto;

5 -> Acesse o vídeo, nele clique com o botão direito do mouse e selecione a opção Copiar código de incorporação;

6 -> Por segurança, cole o conteúdo copiado em um editor de texto, no exemplo abaixo estamos utilizando o Visual Studio Code;

Texto copiado (exemplo): 
<iframe width="790" height="444" src="https://www.youtube.com/embed/KcRmXWMUhpg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

7 -> Note que no conteúdo copiado possui algumas informações importantes, como width (largura) e height (altura), para melhor visualização em diferentes dispositivos vamos alterar estes dados antes de inserir no produto;

ATENÇÃO: Você não é obrigado alterar estas informações pode apenas colar no campo DESCRIÇÃO LONGA, caso queira pular esta etapa, vá para o Tópico 11 deste tutorial;

8 -> Caso você não fizer a personalização ficará da seguinte forma:

 

9 -> Para corrigir esta questão altere as informações para:
<iframe width=”100%” height=”400″ src=”https://www.youtube.com/embed/KcRmXWMUhpg” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

10 -> O resultado esperado é:

11 -> Para inserir no produto, copie este conteúdo e cole no campo DESCRIÇÃO LONGA;

ATENÇÃO: Caso seu Magento esteja habilitado o editor (similar ao World) você precisa voltar ao modo código, para isso clique em Show / Hide Editor. O editor modo código possui o layout similar a este:

12 -> Feito isso, clique em SALVAR, localizado no canto superior direito e verifique no frontend o resultado;

ATENÇÃO: Caso seu índice esteja configurado para executar por agenda, o resultado irá aparecer após a próxima execução, neste caso o aconselhável é aguardar.

13 -> Pronto, você inseriu o vídeo no cadastro do seu produto.

Post Recentes

Cron do Magento 2 não roda: status missed e pending no cron_schedule

Pedido que não fatura e e-mail que não sai porque todo job fica missed: como ler a cron_schedule, conferir o…

13 horas atrás

Gerar slug de URL em PHP: acento, espaço e símbolo fora do endereço

Uma função curta em PHP 8.3 que transforma Camiseta Preta Tamanho GG em camiseta-preta-tamanho-gg, sem depender do locale do servidor.

1 dia atrás

Log de consentimento LGPD: a tabela MySQL que guarda a prova do aceite

O banner registra o clique só no navegador e some. Veja a tabela MySQL e o endpoint que gravam a…

2 dias atrás

Comando CLI Magento 2: criar a classe e registrar no di.xml

A classe do comando existe e o bin/magento list ignora ela. Falta o registro no di.xml: aqui vai a classe…

3 dias atrás

Traduzir o pt_BR.csv do Magento 2 em lote sem perder a coluna de origem

Como traduzir duas mil linhas do pt_BR.csv do Magento 2 lendo com fgetcsv e regravando com fputcsv, sem encostar na…

3 dias atrás

Variação não está disponível no WooCommerce: limpar transients e lookup

Produto variável respondendo "Desculpe, este produto não está disponível" mesmo com a variação ativa: limpe os transients do WooCommerce e…

4 dias atrás