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

WordPress não aparece no Google: noindex esquecido e robots.txt virtual

Site novo há semanas e nenhuma página indexada? Confira a caixinha de visibilidade em Leitura, o noindex no HTML e…

18 horas atrás

array_map perde as chaves do array no PHP: como manter o índice

O retorno do array_map voltou com índice 0, 1, 2 e o código que dependia da chave quebrou. Entenda quando…

1 dia atrás

Backup do Magento 2 com mysqldump: dump leve sem as tabelas de log

Dump de 12 GB que demora horas porque arrasta report_event e cron_schedule. Faça o backup em duas passadas, guarde só…

2 dias atrás

Preference do di.xml não aplica no Magento 2: o que checar antes

Escreveu a preference e o Magento 2 continua usando a classe original? Confira a área do di.xml, o generated/code e…

3 dias atrás

Filtro por atributo do WooCommerce vazio: global x personalizado

Cadastrou Cor direto na aba Atributos do produto e o filtro por atributo vem vazio. Veja como identificar o tipo,…

3 dias atrás

wp db query: rodar SQL no WordPress pelo WP-CLI sem phpMyAdmin

Precisa de um SELECT no banco do cliente e só tem SSH? O wp db query pega a senha do…

4 dias atrás