A parte 1 (descrição de produto ou categoria) é feita no painel e vale para as duas versões de loja. O ajuste de CSS e a parte 2 mudam conforme a versão: editor antigo (abas Configurações, Layout, Páginas, Widgets) ou versão nova (Cloud Commerce, com Configurações e layout).
Se você quer inserir um vídeo no seu site de forma responsiva (ajustado ao tamanho da tela), siga este passo a passo.
1. Na descrição de PRODUTO ou de CATEGORIA
Acesse a descrição do produto ou da categoria no painel. Você verá uma tela como a abaixo. Clique no ícone de vídeo:
Vai abrir outra tela para você colar o link do seu vídeo:
Depois é só salvar.
Para o vídeo ficar responsivo no celular:
- Editor antigo: acesse o editor da loja virtual, vá em Layout > Inserir código e, no campo CSS customizado, cole o código abaixo:
@media(max-width: 767px) {
#product-description iframe {
width: 100% !important;
height: auto !important;
}
}
- Versão nova (Cloud Commerce): não precisa de código. O vídeo da descrição já é limitado à largura da tela.
2. Em outras páginas do site
Você tem duas opções: copiar o código de incorporação do vídeo (iframe) e colar na loja em um campo que aceite HTML, ou usar um dos códigos abaixo.
Editor antigo:
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="URL"></iframe> </div>
Versão nova (Cloud Commerce), que não usa essas classes:
<iframe src="URL" style="width:100%;aspect-ratio:16/9;border:0" allowfullscreen></iframe>
URL é o link do vídeo. Esses códigos deixam o vídeo responsivo em qualquer tamanho de tela.
Vamos para um exemplo prático:
Abra o vídeo no YouTube (por exemplo https://www.youtube.com/watch?v=-PayqoKBs4o) e clique em Compartilhar > Incorporar. Copie o código e verá algo como:
<iframe width="560" height="315" src="https://www.youtube.com/embed/-PayqoKBs4o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Se for colar esse código direto na loja, troque o 560 do atributo width por 100%. Se for usar um dos códigos acima, pegue o link que está dentro do código, que é:
https://www.youtube.com/embed/-PayqoKBs4o
E coloque no lugar de URL. No editor antigo, fica assim:
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/-PayqoKBs4o"></iframe> </div>
No editor da loja (bloco de texto)
Acesse o bloco de texto onde quer inserir o vídeo (no editor antigo, por exemplo, a seção Conteúdo customizado de uma página).
Clique para ativar Markdown, conforme a imagem:
Com o Markdown ativo, cole o código no local desejado:
Clique novamente para voltar para Rich Text e verá o resultado:
Depois, clique em Publicar e espere alguns minutos. Se não aparecer, teste em uma guia anônima (veja Alterei e o site não mudou).
Se o vídeo não aparecer ou ficar cortado depois de publicar, abra um ticket informando o endereço da página e o código que você colou.