Artigos sobre: INTEGRAÇÕES
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.


2. Inserindo o Widget HTML


  • 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?

Compartilhe seu feedback

Cancelar

Obrigado!