Inserting Video for Different Desktop and Mobile Page 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:

1. Preparing Elementor

• Access your WordPress admin panel.
• Go to the page you want to edit using Elementor.
• Click 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 appear.

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

• After inserting the CSS, paste the following HTML code specific to your MOBILE EMBED in another HTML widget where you want your mobile video to appear:

<div class="mobile">
  YOUR MOBILE-SPECIFIC EMBED HTML CODE
</div>

Part 3 – Desktop Code and Scripts

• For this step, you will need to copy the HTML of your video and the script that comes with your embed:

• After copying, you must insert all of them below, plus the responsiveness code, in a new HTML widget, like this:

<!-- your video html -->

<div class="desktop">
  YOUR DESKTOP-SPECIFIC EMBED HTML CODE
</div>

<!-- your video html -->

<!-- Responsiveness scripts: -->
<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>
<!-- Responsiveness scripts: -->

<!-- Video functioning scripts: -->

YOUR VIDEO FUNCTIONING SCRIPT

<!-- Video functioning scripts: -->

• This code will ensure the correct video loads for desktop and mobile without conflicts or duplicate 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 correctly, confirm that the external script is being properly loaded by the browser.

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

Updated on: 08/06/2025