Este artigo também está disponível em:

Como inserir vídeos responsivos com versões Desktop e Mobile no Elementor

Este tutorial ajudará você a sincronizar elementos da sua página WordPress (Elementor) com o novo player de vídeo utilizando o código personalizado.

Siga o passo a passo detalhado:

1. Preparando o Elementor

Acesse o painel administrativo do seu WordPress.
Vá até a página que deseja editar usando o Elementor.
Clique em Editar com Elementor.

Dentro do editor Elementor, arraste e solte o widget HTML na área onde deseja que o vídeo seja exibido.

3. Adicionando o Código

Copie e cole cada parte do código a seguir em um widget HTML, exatamente nesta ordem e conforme as instruções específicas para cada parte:

Parte 1 - Código CSS

Clique no widget HTML que você inseriu.
Na caixa do widget, cole o seguinte código CSS:

<style>
  .mobile {
    display: none;
  }

  .desktop {
    display: block;
  }

  @media (max-width: 768px) {
    .mobile {
      display: block;
    }

    .desktop {
      display: none;
    }
  }
</style>

Parte 2 - Código para Mobile

Após inserir o CSS, cole o seguinte código HTML específico do seu EMBED para dispositivos móveis em um outro Widget HTML que deseja que seu vídeo Mobile apareça:

<div class="mobile">

  CODIGO HTML ESPECIFICO DO SEU EMBED

</div>

Parte 3 - Código para Desktop e Scripts

Para essa etapa, você precisará copiar o HTML do seu Video, O script de funcionamento que acompanha em seu embed:

Após copiar, você terá que inserir todos eles abaixo e mais o codigo de responsividade em um novo Widget HTML, ficará assim:

<!-- html do seu video -->

<div class="desktop">

CODIGO HTML ESPECIFICO DO SEU EMBED

</div>

<!-- html do seu video -->

<!-- Scripts para responsividade: -->
<script>
  if (window.innerWidth < 768) {
    const el = document.querySelector(".desktop vturb-smartplayer");
    el.parentElement?.removeChild(el);
  } else {
    const el = document.querySelector(".mobile vturb-smartplayer");
    el.parentElement?.removeChild(el);
  }
</script>
<!-- Scripts para responsividade: -->

<!-- Scripts de funcionamento do seu Video: -->
 
SCRIPT DE FUNCIONAMENTO DO SEU VIDEO 

<!-- Scripts de funcionamento do seu Video: -->

Este código vai garantir que o vídeo correto seja carregado para desktop e mobile sem causar conflitos ou carregamento duplicado.

4. Salvando e Publicando

Após inserir o código, clique no botão Atualizar no Elementor.
Verifique o resultado final abrindo sua página em diferentes dispositivos (desktop e mobile).

5. Dicas de Validação

Teste a página em modo de navegação anônima para garantir que o comportamento esteja correto.
Caso o vídeo não carregue corretamente, confirme que o script externo está sendo carregado adequadamente pelo navegador.

Agora, seu vídeo está sincronizado corretamente com os elementos da página no Elementor, adaptando-se perfeitamente aos dispositivos móveis e desktops!

Atualizado em: 09/07/2025

Este artigo foi útil?

Obrigado!