How to Embed YouTube Shorts in Elementor

Embedding YouTube Shorts into your Elementor website is an excellent strategy for repurposing your best vertical videos and making your pages more dynamic. This adds a layer of engaging, short-form content that can capture visitor attention and enrich their experience. This guide will walk you through exactly how to do it, covering simple, direct methods that don't require plugins, as well as more advanced strategies for creating automated galleries.

Why Bother Embedding YouTube Shorts on Your Website?

Before we get into the "how," let's quickly touch on the "why." Placing YouTube Shorts on your website isn't just about filling space, it's a strategic move with several clear benefits for your brand and your audience engagement.

• Boost Watch Time and Channel Metrics: Every view your Short gets on your website counts. Embedding videos helps increase overall watch time, which is a positive signal to the YouTube algorithm. It can lead to more impressions for your content both on and off the platform.
• Repurpose High-Performing Content: You worked hard to create that viral Short. Don't let it live only on YouTube. Embedding it on a relevant blog post, landing page, or "About Us" page gives your best content a second life and provides more value to your site visitors.
• Improve On-Page SEO: Engaging content like video can significantly increase the time visitors spend on your page (known as "dwell time"). Longer dwell times tell search engines like Google that your page provides valuable content, which can positively impact your rankings.
• Showcase Your Brand's Personality: Shorts are often more casual, authentic, and personality-driven than longer, polished videos. Embedding them gives visitors a genuine behind-the-scenes look at your brand, helping to build trust and a stronger connection. It’s a great way to show the human side of your business.

The Problem: A Standard YouTube Embed Doesn't Work for Shorts

If you've tried embedding a Short before, you've likely run into this frustrating problem: you grab the URL, paste it into Elementor’s Video widget, and it shows up as an awkwardly formatted horizontal video with huge black bars on the sides. It completely ruins the vertical experience and looks unprofessional.

This happens because of how YouTube structures its URLs.

A standard long-form YouTube video URL looks like this:

https://www.youtube.com/watch?v=VIDEO_ID

But when you share a Short, the URL looks different:

https://www.youtube.com/shorts/VIDEO_ID

Simply pasting this /shorts/ link into most video players or embed fields will default to the standard 16:9 aspect ratio player, leading to that ugly presentation. The key is to slightly modify the link to tell YouTube you want an embeddable version that respects the video's original format.

The Fix: Get the Right YouTube Short Embed URL

The solution is surprisingly simple. You just need to change one part of the URL. Instead of using the /shorts/ version of the link, you'll need the /embed/ version. This is the universal format YouTube videos use for embedding.

Here’s the simple conversion process:

• Your Original Shorts URL: `https://www.youtube.com/shorts/ABC123XYZ`
• The Correct Embed URL: `https://www.youtube.com/embed/ABC123XYZ`

By just swapping `/shorts/` for `/embed/`, you now have a link that will work perfectly inside Elementor's widgets and standard iframe code. This simple tweak is the foundation for all the methods we’ll cover next.

Method 1: Embedding a Single Short with Elementor’s Native Widgets

For embedding one or two Shorts on a page, you don’t need any extra plugins. Elementor’s built-in Video and HTML widgets are more than capable. Here's how to use them to get that perfect vertical format.

Using the Video Widget

This is the most straightforward method, ideal for quickly adding a video and getting the styling right.

1. Get Your Modified URL: Find the YouTube Short you want to embed. Copy its URL from the browser's address bar. For example, `https://www.youtube.com/shorts/YourVideoID`. Now, modify it to `https://www.youtube.com/embed/YourVideoID`.
2. Add the Video Widget: In your Elementor editor, drag and drop the "Video" widget onto the section where you want it to appear.
3. Paste Your Link: In the widget settings panel on the left, under the "Content" tab, paste your modified `/embed/` URL into the "Link" field. You'll see the video appear.
4. Adjust the Aspect Ratio: At first, it might still look like a horizontal video. This is where you finalize the vertical format. Go to the "Style" tab in the Video widget settings. Find the "Aspect Ratio" option. The default is 16:9. Click the dropdown and choose "Custom." Now, you can adjust the size to make it taller than it is wide. A common setting that works well is setting a width around `9` and a height of `16` or playing with the slider until it conforms to the tall, narrow format of a Short. Often, just creating room for it in a narrow column and setting a larger custom viewing size will force the proper aspect ratio.

Using the HTML Widget for Precision Control

If you want exact control over the dimensions, or if the Video widget isn't cooperating, the HTML widget with an iframe code is a bulletproof method.

1. Create Your Embed Iframe: You can start with a basic iframe code template. The key here is to set the `width` and `height` attributes to a 9:16 ratio. A good starting point is `width="315"` and `height="560"`.
2. Drag the HTML Widget: Find the "HTML" widget in the Elementor panel and drag it onto your page.
3. Paste and Modify the Code: A settings box will appear where you can add your HTML. Copy and paste the following code, making sure to replace `YOUR_VIDEO_ID` with the actual ID of your YouTube Short.

<,iframe width="315" height="560" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer, autoplay, clipboard-write, encrypted-media, gyroscope, picture-in-picture, web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>,<,/iframe>,

The video will immediately appear in the correct vertical aspect ratio. You can adjust the pixel values for width and height as needed, as long as you maintain that 9:16 feel. This gives you exact pixel control over the final look.

Method 2: Using Plugins to Create a Dynamic Shorts Gallery

Embedding Shorts one by one is great, but what if you want to display an entire feed that updates automatically whenever you post a new Short? This is where plugins come in. This approach is perfect for a "Latest Videos" section on your homepage or a dedicated portfolio page.

While there are many great plugins available, the general process is very similar across all of them. Plugins like Smash Balloon's YouTube Feed Pro or certain widgets in Essential Addons for Elementor are popular choices.

Here’s the high-level workflow:

1. Install and Activate the Plugin: Choose a reputable YouTube feed plugin from the WordPress repository or a premium vendor. Install and activate it.
2. Connect Your YouTube Channel: Navigate to the plugin's settings. You'll usually be prompted to connect to your YouTube account via an API key or by signing in. This allows the plugin to pull video data directly from your channel.
3. Create a New Feed and Customize: Once connected, you’ll create a "feed." During this step, you'll be able to filter the content. You can choose to pull from a specific playlist or, importantly for us, tell it to *only* display YouTube Shorts. You'll also find customization options for the layout (grid, carousel, masonry), the number of columns, hover effects, and whether to show likes/comments.
4. Add the Feed to Elementor: The plugin will provide its own Elementor widget. Search for it in the Elementor widget panel (e.g., "YouTube Feed"), drag it onto your page, and select the specific feed you just created.

Using a plugin requires a bit more initial setup, but the payoff is a dynamic, "set it and forget it" gallery that keeps your website's content fresh and synced with your YouTube channel automatically.

Pro Tips for Making Your Embedded Shorts Even Better

Getting the video on your page is just the first step. Here are a few extra tips to improve the user experience and get more value out of your embeds.

• Mind Your Page Load Speed: Videos are heavy assets. Embedding too many on a single page can slow it down. Elementor has lazy loading features you can enable for videos, which means the video only loads when a visitor scrolls down to it. Look under the video settings for performance options, or use a caching plugin like WP Rocket that has this feature built-in.
• Autoplay Muted Videos for a Social Media Feel: One of the appeals of social media is the auto-playing video. You can replicate this by modifying your embed URL. Add &autoplay=1&mute=1 to the end of your `src` link in the iframe code. The `mute=1` part is very polite and important, most browsers block autoplay videos with sound anyway, and it prevents an annoying experience for your visitors.
• Loop Your Best Shorts: For very short, impactful clips, you might want them to loop continuously. To do this, add `&loop=1&playlist=YOUR_VIDEO_ID` to the end of the URL. Note that for YouTube's loop parameter to work, the `playlist` parameter must also be included, even if it's just repeating the same video ID.
• Always Add Context: Never just plop a video onto a page without an introduction. Use a headline or a short descriptive paragraph to explain what the video is about and why the visitor should watch it. This provides context for both your users and for search engines.
• Check on Mobile: Most social video is consumed on a mobile, so make sure your embedded Shorts look great on smaller screens. Use Elementor's responsive mode to preview the page on tablet and mobile and ensure your columns and layouts adapt correctly.

Final Thoughts

Embedding YouTube Shorts in Elementor is straightforward once you know the secret is tweaking the URL from `/shorts/` to `/embed/`. Whether you choose the direct control of Elementor's native widgets for a single video or the automated power of a plugin for a full gallery, you can effectively integrate your most engaging vertical content into your website pages.

Keeping your social content pipeline filled is what makes repurposing onto your website so effective. At Postbase, we built our platform from the ground up to handle the demands of short-form video. Since we prioritize YouTube Shorts, Reels, and TikToks, you can use our visual calendar to plan your entire video strategy, then schedule once to all your platforms. Having a rock-solid, reliable system for your social video streamlines your workflow, making it that much easier to create outstanding content you'll be excited to feature on your Elementor site.