Vídeo na descrição do produto (Mobile)

Boa tarde. Como estão?

Como deixar o vídeo na descrição do produto “responsivo” no mobile? Digo, deixar o vídeo “inteiro” na tela sem ter que deslizar na horizontal.

Página do produto: Impermeabilizante Acrílico a Base de Água Kryll 1 Litro - Adequim

Fico no aguardo.

Obrigado.

Olá @roque
Boa tarde. Tudo bem e você?

Para deixar o vídeo responsivo precisa modificar a url dentro da descrição do produto. Fazendo dessa forma:

1 curtida

@Luiza tem uma segunda forma também, se já tiver colocado os vídeos em todos os produtos, que é via css:

@media(max-width: 767px) {
  #product-description iframe {
      width: 100% !important;
      height: auto !important;
    }
}

No caso, pra qualquer iframe inserido na descrição valerá essa regra, caso tenha algum diferente de vídeo.

2 curtidas

Ai @Luiza atualiza esse tópico com o código e @roque pode colocar, que vai ficar ótimo

2 curtidas

@Matheus e @Luiza, muito obrigado.

Coloquei o código no CSS conforme o Matheus indicou. Foi mais fácil. A única questão é que retirei o “height: auto” pois o quadro ficou muito estreito. Há algum problema nisso?

No mais, um bom dia e um bom final de semana para vocês.

Abraço!

Bom dia, tudo bem?
A altura automática, é pra evitar ter distorção, porque está sempre fixando em 100% a largura. No caso, pra vídeo, ele somente se adequea ali na região, se fosse imagem, conseguiríamos ver mais claramente.