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.

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?

Thank you!