This Mod is now included natively in the Voxel WordPress Theme. No need to add it. Now called: Replace Text
Embedding YouTube Shorts videos in Elementor and the Voxel Theme requires editing the URL to replace the text ‘shorts’ with ’embed’.
- YouTube Shorts URLs typically look like this:
youtube.com/shorts/your-video-id - But for embedding YouTube Shorts in your website using Elementor’s video widget, the correct format is:
youtube.com/embed/your-video-id
But what happens when you’re trying to embed a YouTube Shorts video and the URL format submitted by your users isn’t compatible with the embed requirements?
Using Voxel Theme’s dynamic tag and this custom modifier, you can easily find and replace text in a URL, ensuring your YouTube Shorts URLs are in the proper embed format. This eliminates the need for manual editing of each URL, streamlining your workflow and ensuring that videos display correctly on your site.
In this article, we’ll introduce a new Voxel Mod, Find and Replace URL Modifier that finds your text match and replaces it with your given data.
The Code: Voxel Theme URL Modifier: Find and Replace Text in URL Path
*** Disclaimer – Use at your own risk. Always make a backup. ***
Add to your functions.php file.
// We got this included natively in the Voxel Theme
// Now called: Replace Text
To implement this solution, you’ll need to add the code to your WordPress site. You have two options for where to place this code:
- Child Theme’s functions.php File:
If you’re already using a child theme (recommended for customization), simply add the PHP code to your functions.php file. This will ensure your changes are preserved even if the main Voxel theme is updated.
- Code Snippets Plugin:
If you prefer not to edit theme files directly, or if you want to manage your custom code more easily, you can use the Code Snippets plugin. This plugin allows you to add custom PHP code without touching your theme files. Just create a new snippet, paste the code, and activate it.
Then apply this Voxel Mod to any Video widget in Elementor for the proper embed URL, or apply it to any text or heading widget to display the correct URL path.
