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
Obrigado!