How to Embed YouTube Shorts on Your Divi Website
clicksocial

Schedule social media posts straight from WordPress with ClickSocial

Start Free Trial angle-right
Home Blog How to Embed YouTube Shorts on Your Divi Website

How to Embed YouTube Shorts on Your Divi Website

How to Embed YouTube Shorts on Your Divi Website

Want an easy way to embed YouTube shorts on Divi websites?

By displaying YouTube shorts, you can easily keep your website visitors interested with short-form video content.

But if you’re manually embedding content from YouTube, you’ll need to deal with a lot of embed codes.

The good news is that there’s an easier way to embed YouTube shorts, and we’ll show you how.

Before that, let’s look at the different ways YouTube shorts can help your Divi website.

Or you can click here and skip directly to the tutorial.

Why Embed YouTube Shorts on a WordPress Divi Site?

As a user-friendly website builder, Divi is a popular option for people who want an engaging website.

divi wordpress theme

And if you want to make your Divi WordPress website even more engaging, an easy solution is to display YouTube shorts.

Since YouTube shorts are bite-sized content that can be viewed quickly, people are much more likely to check them out.

So, you can convince website visitors to watch your videos and keep them on your site for more.

youtube shorts example

On top of that, embedding YouTube shorts can help you:

  • Share positive reviews and testimonials of your products and boost your sales
  • Display your YouTube shorts and convert visitors into YouTube subscribers
  • Highlight product demonstrations or features with a quick video and build customer trust
  • And much more…

Now that you know how embedding YouTube shorts helps your business, let’s look at the easiest way to do that.

Easiest Way to Embed YouTube Shorts on Your Divi Website

Manually adding YouTube shorts to your website can be tough – especially if you’re a WordPress beginner.

After all, you’ll need to deal with complicated HTML codes or YouTube shorts embed code generators.

manually copy embed codes wordpress

What’s more, you’ll have to manually edit the code or hire designers to customize how the YouTube shorts look on your site. 

So, it can be tough to display YouTube shorts that match your branding.

The good news?

You can add YouTube content to your website in just a few clicks.

All you need is a YouTube feed plugin for your Divi WordPress site. And the best option out there is YouTube Feed Pro.

youtube feed pro plugin smash balloon

As the best YouTube feed plugin in the market, YouTube Feed Pro lets you create, customize, and embed video feeds in just minutes. 

Plus, it’s perfectly compatible with Divi, so adding videos to your site is even easier.

On top of YouTube shorts, you can also embed YouTube videos, playlists, channels, and much more.

youtube feed reviews example

Just follow the plugin’s guided flow, and you’ll be able to create your YouTube feeds and personalize them before adding them to your website – no need to touch a single line of code.

What’s more, you can import a pre-designed template with pre-designed layouts, so it’s easier than ever to create beautiful YouTube feeds to engage your visitors.

There’s even a visual customizer where you can freely personalize your YouTube feeds with simple clicks – no need for HTML, Custom CSS, or any kind of code.

live feed youtube

Another great thing about the plugin is the dedicated support team of WordPress experts. You can always reach out to them if you have any questions or need some help.

On top, YouTube Feed Pro really is the best plugin for adding YouTube shorts on your Divi website.

Ready to embed YouTube shorts? You can get your copy of YouTube Feed Pro here.

With that, let’s see how you can use the plugin with your Divi site and display YouTube shorts.

How to Embed YouTube Shorts on Divi Websites 

All you have to do is follow our step-by-step guide below, and you can have a feed of YouTube shorts on your Divi website.

Let’s get started!

Step 1: Install YouTube Feed Pro Plugin

Ready to get started? First, get your copy of YouTube Feed Pro here before installing it on your website.

For a quick refresher, you can check out our beginner’s guide on how to install a plugin in WordPress.

Once your plugin is installed and activated, you can begin step 2.

Step 2: Create a Feed For YouTube Shorts

Using the plugin, you can now create a new feed to display your YouTube shorts.

From your dashboard area, navigate to the YouTube Feed » All Feeds menu and then click on the Add New button.

embed youtube playlist by adding new feed

After that, you can choose the type of YouTube feed. For now, you can simply choose a channel or playlist depending on the location of your YouTube shorts.

Once you select an option, click on Next.

For this example, we’ll use the playlist feed type and show YouTube shorts from a selected playlist.

In step 3, you can connect this feed to your YouTube account.

Step 3: Connect Your YouTube Account

Once you connect your YouTube account, your feed can start displaying the shorts on your Divi WordPress website.

And the easiest way to connect your account is to add a YouTube API key.

Don’t have a key yet? Just check out this guide on how to create your YouTube API key.

After your YouTube API key is ready, return to your website and paste it into the popup before clicking on Add.

add api key youtube

Just like that, your new feed is connected to YouTube.

You can now choose the source for your YouTube shorts. Just open the playlist in your web browser to get started.

Now, you can copy the code at the end of the video URL before returning to your site.

copy playlist id youtube shorts

Once you’re back, just paste the code that you just copied into the Playlist ID field here.

Finally, click on the Next button below to continue.

So far, you’ve created a feed and added your YouTube shorts as the source.

Your YouTube shorts can now automatically copy your Divi site’s design and look beautiful right out of the box.

In step 4, you can customize how your YouTube shorts will look in Divi.

Step 4: Customize Your YouTube Shorts

Now, the plugin will give you 8 different pre-designed templates that you can choose from:

  • Default
  • Carousel
  • Cards
  • List
  • Gallery
  • Latest video
  • Showcase carousel
  • Widget

Just select the template whose design you want to use and then click on Next.

pick a feed template youtube feed pro

Once you do that, YouTube Feed Pro will redirect you to the plugin’s visual customizer.

From here, you can easily personalize your YouTube shorts by editing their layout, color scheme, header style, load more buttons, and much more.

live feed editor youtube shorts

On the right side of the customizer, you can find a real-time preview of your videos. That way, you can track all of your changes with ease.

To begin the customization, click on the Feed Layout option on the left.

feed layout option youtube shorts

To control how the videos appear on your YouTube feed, you can choose from 4 layouts:

  • Grid: Show lots of YouTube shorts at once in different rows and columns
  • Gallery: Highlight one specific YouTube short and show others in smaller thumbnails
  • List: Display your video content in a single row so the YouTube shorts are clearly visible
  • Carousel: Make your website more interactive with a YouTube carousel slider
select youtube shorts feed layout

Once you’re happy with your feed layout, click on Save to keep your changes.

After you do that, click on the Customize button to continue personalizing your YouTube videos.

customize your youtube feed

After customizing your layout, you can select your colors from the visual customizer.

You can do that by clicking on the Color Scheme option here.

color scheme option youtube shorts

Next, you can pick from these 4 color schemes for your new YouTube feed:

  • Inherit from Theme: Copy the colors of your Divi theme
  • Light: Select a light background and dark font color
  • Dark: Show a dark background with a light font
  • Custom: Pick all the colors manually
select your youtube shorts colors

Don’t forget to click on Save once you’re happy with your colors.

Now, you can use the remaining options here to set up your header design, filters, load more button, video elements, and much more.

Click on the Save button at the end to confirm your new design. Just like that, you can move on to the final step below.

Step 5: Embed YouTube Shorts on Your Divi Website

Now that you’ve customized how your YouTube shorts look, you can go ahead and embed it on your site in this step.

From the visual customizer, click on the Embed button to get started.

embed youtube shorts on wordpress

Now, you’ll see the embed options for your YouTube shorts. You can embed it on a page, add it as a widget, or even copy the shortcode manually.

This time, you can click on Copy to continue.

copy shortcode of youtube feed

Once you do that, go to your WordPress dashboard and then navigate to the Pages » Add New menu.

After the page is open in the WordPress editor, click on the Use The Divi Builder button at the top to continue.

Want to use a WordPress post for your YouTube shorts instead?

To do that, open the Posts » Add New menu from your dashboard and open the post in the WordPress editor.

Like before, click on the Use The Divi Builder button.

add new post in divi

Now, there are 3 ways to start designing your Divi page or post:

  • Start Building: Start with a blank template
  • Browse Layouts: Edit a pre-built design
  • Choose Page: Copy an existing page

Just select the option you prefer to continue.

choose divi builder option

For the Start Building option, you’ll see a blank page that you can immediately start editing.

start building with divi editor

Selected the Browse Layouts option? The Divi editor will let you choose between different layouts.

To continue, click on the layout that you prefer.

load layout pack from library divi

You’ll then see more details about this specific layout.

To import this layout for your Divi page or post, click on the Use This Layout button.

import layout for divi

In case you used the Choose Page option, Divi will show you a list of your previously designed layouts.

From there, you can click on the layout you want to reuse.

load from library divi theme

In the Divi editor, first, add a new row by clicking on the green plus icon (+).

Next, select the type of row you’d like to add.

insert row into divi website

Now that you’ve added a row, you can go ahead and insert your YouTube shorts feed.

For that, click on the plus (+) icon and then search for the “code” module.

Finally, click on the Code module in the search results below.

code module for divi theme

You’ll then see the options for your code module on the left-hand panel.

Now, look for the Code field on the left and then paste the shortcode.

embed youtube feed on website

To confirm your new module, click on the green check icon at the bottom.

Just like that, you’ve embedded the YouTube shorts on your Divi website. Just open this web page or post and you can preview how your YouTube videos look.

divi youtube shorts output example

And there you have it!

As you can see, it can be super easy to embed YouTube shorts on Divi websites if you have the right tool.

With the help of YouTube Feed Pro, it’s easier than ever to embed YouTube shorts in WordPress to engage your website visitors and grow your business.

Want to embed YouTube shorts in Divi? Get YouTube Feed Pro for your site today!

Looking for a simple way to monetize your YouTube account? We’ve got you covered with our guide on making money on YouTube.

Don’t forget to follow us on Twitter or Facebook for more social media marketing tips and tricks.

author avatar
Sajjan Sharma Senior Writer
Sajjan has been writing about WordPress, social media marketing, and online businesses for over 10 years. His professional interests extend to include influencer marketing, content curation and digital marketing strategies.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.