Articles on: INTEGRATIONS
This article is also available in:

How to Add Responsive Videos with Desktop and Mobile Versions in Elementor


This tutorial will help you synchronize elements on your WordPress (Elementor) page with the new video player using custom code.


Follow the detailed step-by-step instructions:


1. Preparing Elementor

  • Access your WordPress admin panel.
  • Go to the page you want to edit using Elementor.
  • Click on Edit with Elementor.


2. Inserting the HTML Widget

  • Inside the Elementor editor, drag and drop the HTML widget into the area where you want the video to be displayed.


3. Adding the Code

  • Copy and paste each part of the following code into an HTML widget, exactly in this order and following the specific instructions for each part:


Part 1 - CSS Code

  • Click the HTML widget you inserted.
  • In the widget's code box, paste the following CSS code:
<style>
.mobile {
display: none;
}

.desktop {
display: block;
}

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

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


Part 2 - Mobile Version Code

  • After inserting the CSS, paste the following HTML code for mobile devices into another HTML widget where you want your mobile video to appear:
<div class="mobile" style="background-color: red; padding: 10px">
<vturb-smartplayer
id="vid-686820c805a276572364d1d6"
style="display: block; margin: 0 auto; width: 100%"
></vturb-smartplayer>
</div>


Part 3 - Desktop Version Code and Scripts

  • Then, copy and paste the following scripts and desktop version HTML into another HTML widget to ensure the proper functioning of the player:
<div class="desktop" style="background-color: blue; padding: 10px">
<vturb-smartplayer
id="vid-686820c805a276572364d1d6"
style="display: block; margin: 0 auto; width: 100%"
></vturb-smartplayer>
</div>

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

<script type="text/javascript">
var s = document.createElement("script");
(s.src =
"https://scripts.converteai.net/a31c66e3-3431-4a21-b5ce-fa3a68d3640d/players/686820c805a276572364d1d6/v4/player.js"),
(s.async = !0),
document.head.appendChild(s);
</script>


This code ensures that the correct video version is loaded for desktop and mobile without causing conflicts or duplicated loading.


4. Saving and Publishing

  • After inserting the code, click the Update button in Elementor.
  • Check the final result by opening your page on different devices (desktop and mobile).


5. Validation Tips

  • Test the page in incognito mode to ensure the behavior is correct.
  • If the video does not load properly, make sure the external script is being correctly loaded by the browser.


Now your video is properly synchronized with the page elements in Elementor, adapting perfectly to both mobile and desktop devices!


Updated on: 07/07/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!