Olá neste artigo vamos falar de vídeos na loja, para colocar vídeos na loja sempre usamos os incorporadores, códigos que o youtube fornece para a gente, porém estes códigos não são responsivos, ou seja, não ficam ajustado a telas menores. neste artigo vou mostrar uma forma mais avançada de se usar os códigos do vídeo do Youtube de forma responsiva na sua loja, vamos lá!

1 Adicionado CSS

Primeiro vamos no menu de Customização > Personalizar e na aba de Avançado vamos colocar o seguinte trecho de código de CSS Personalizado mas ATENÇÃO se tiver algum código ali, role para a última linha e cole depois de tudo ok?

.embed-container{ 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
	height: auto;
	margin-top: 30px;
	margin-bottom: 30px; 
} 
	.embed-container iframe, .embed-container object, .embed-container embed{
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%; 
	}

2 Copiando o código do Vídeo

Agora vamos pegar o código de incorporação do vídeo, na data de publicação deste artigo ele fica logo ao lado da avaliação do vídeo, em COMPARTILHAR

Ao clicar abre uma janela e logo no início tem um ícone de inorporar

Ao clicar nele uma nova janela se abre e basta copiar o código, que deve ser algo como isso:

<iframe width="560" height="315" src="https://www.youtube.com/embed/pibj7vfVJKU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Dica: Você pode alterar algusn parâmetros do vídeo do youtube, como remover vídeos ao final, autoplay, etc.. confira mais abaixo do código algumas opções e depois copie e guarde este código, vamos usar ele no próximo passo.

3 Adicionado o Vídeo

Agora vamos voltar na loja, e ir no módulo que vamos inserir o vídeo, pode ser qualquer lugar que tenha um editor de texto, descrição de produto, categoria, área Personalizada, etc… no meu exemplo vou colocar este vídeo na tela inicial da loja abaixo do banner de ofertas especiais. Leia neste artigo mais sobre posições e Layouts da loja, saiba onde e como pode colocar diversas partes e módulos na loja e motar como desejar.

Vou utilizar o módulo de Áreas Personalizada para colocar meu vídeo na página inicial, então vamos no menu de Customização > Áreas Personalizada vou criar uma nova área e chamar de vídeo home, não mostrar o título, escolher o layout home e a posição coluna esquerda.

Agora vou no editor de texto e criar uma DIV primeiro, clicando no símbolo e colocando a classe embed-container como mostra a imagem abaixo:

Vou escrever dentro dela algo fácil de encontrar no código como CÓDIGO DO VÍDEO, vai ficar como a imagem abaixo:

Assim vai ficar mais fácil de achar o ponto exato de onde devo inserir o código do vídeo, para isso basta clicar em Código Fonte, veja que temos uma DIV e dentro dela nosso texto.

Agora vamos substituir o texto pelo código do vídeo, deve ficar assim:

Feito isso só salvar e testar na loja, pronto agora toda vez que eu precisar usar um vídeo crio uma DIV com a classe coloco o vídeo do youtube dentro dela.

Espero ter ajudado, até mais