How to Create a YouTube Widget for Your Website (Step-by-Step) (2024)

Want to know how to create a YouTube widget for your website? As the top social network for video content, it’s smart to cross-promote your YouTube channel.

Yet when it comes to adding your videos to WordPress, it can be tough to get started — especially if you’re not used to dealing with code.

In this article, we’re going to share several methods for creating a YouTube widget for your site.

Here are the methods we’ll be covering today. Click the one you need to jump straight to it:

  • Create a YouTube widget with a WordPress plugin
  • Add a YouTube widget to your WordPress sidebar
  • Embed a YouTube widget manually

Before we get started with our tutorial, let’s see how adding a YouTube widget can help your business grow.

Why Use a YouTube Widget for Your Website

A YouTube widget is simply a block of video content from YouTube that you can show on your website.

How to Create a YouTube Widget for Your Website (Step-by-Step) (1)

As a result, your website visitors can check out YouTube videos directly on your website. This keeps them on your site for much longer and gives you more chances to convert them into customers.

What’s more, you can even get better SEO if people stay on your site for longer.

Here are a few more amazing ways you can use YouTube widgets for a website:

  • You can show social proof like reviews and testimonials on YouTube and convince people to buy your products
  • To get more views, likes, and subscribers, you can show your own video content using a YouTube widget
  • Your YouTube widget can also share your live stream with your website visitors so you can get interested people to join in
How to Create a YouTube Widget for Your Website (Step-by-Step) (2)
  • You can share user-generated content (UGC) from your customers to encourage more people to make video content about your brand
  • By showing relevant content from YouTube, you can grab people’s attention and keep them engaged on your site

And that’s just the start! YouTube widgets can help you get more sales, boost your social media presence, and grow your business.

With that, let’s go ahead and check out how you can embed YouTube widgets for your website.

Easiest Way to Add a YouTube Widget to WordPress?

Now that you know what a YouTube widget is, let’s check out the simplest way you can start making use of YouTube widgets.

There are two ways you can create a YouTube widget for your website:

  • Manually add the YouTube widget to your website
  • Use a WordPress plugin to create and embed the YouTube widget

WordPress plugins are an excellent way to enhance your website’s functionality without needing to learn to code or hire a developer.

On the other hand, using the manual method requires you to work with CSS, JavaScript, and other coding languages.

How to Create a YouTube Widget for Your Website (Step-by-Step) (3)

In fact, you can use a YouTube feed plugin that comes with tons of features designed to make your widget look great with minimal effort.

And when it comes to YouTube feed plugins, the best option in the market is YouTube Feed Pro by Smash Balloon.

How to Create a YouTube Widget for Your Website (Step-by-Step) (4)

YouTube Feed Pro makes it easier than ever before to embed content from YouTube on your website — no coding needed!

With a few simple clicks, you can make your widget display YouTube content from your favorites, YouTube playlists, live streams, and more.

Plus, you can choose from a collection of templates and then use the simple live customizer to design a YouTube widget that looks just the way you want.

How to Create a YouTube Widget for Your Website (Step-by-Step) (5)

Since the plugin is so lightweight, you can display tons of YouTube videos, and your feed will still load lightning-fast.

As you can see, YouTube Feed Pro gives you the easiest way to embed YouTube widgets for websites.

Ready to get started with YouTube marketing? Get your copy of YouTube Feed Pro today.

With that, let’s see how you can show YouTube widgets on your site.

Methods for Creating a YouTube Widget for Your Website

Now let’s look at the different ways to create a YouTube widget for your website. We’ll start with the easiest method first, then work down to the most difficult instructions.

Method 1: Create a YouTube Widget With a WordPress Plugin

To create a YouTube widget for your website’s posts, pages, and sidebar areas, you’ll need to download the YouTube Feed Pro WordPress plugin.

YouTube Feed Pro is the most versatile YouTube plugin on the market and comes from the team behind the highest-rated social feed plugins for WordPress and Smash Balloon.

In fact, some of the biggest brands in the world are using Smash Balloon plugins to display social feeds.

How to Create a YouTube Widget for Your Website (Step-by-Step) (6)

With this plugin, you can automatically show YouTube videos on your website without uploading each one manually. Even better, your feeds will look great right out of the box — no code required.

This results in clean, customizable, and engaging feeds that add valuable social proof to your website.

Step 1: Download and Install the YouTube Feed Pro Plugin

First, click here to get your copy of YouTube Feed Pro.

Once you’ve downloaded the plugin to your computer, install and activate the plugin.

If you’re not sure how to do that, you can simply follow these steps to install a WordPress plugin.

Step 2: Create a New YouTube Widget

After you install and activate the plugin, you can simply follow the guided flow to create your YouTube widget.

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

How to Create a YouTube Widget for Your Website (Step-by-Step) (7)

When you do that, YouTube Feed Pro will allow you to choose the type of YouTube content to display in your widget. The options included are:

  • Channel: A feed displaying content from a YouTube channel using a channel ID or username
  • Playlist: Show specific playlists in a feed by entering the YouTube playlist ID
  • Favorites: The favorites feed type shows all videos marked as “favorites” by a YouTube account
  • Search: Use the search feed type to show content based on specific search terms or phrases
  • Live Streams: Display a single upcoming or live streaming video in your feed
  • Single Videos: Show individual videos sorted in order

To continue, select your feed type and then click on Next.

How to Create a YouTube Widget for Your Website (Step-by-Step) (8)

For our example, we’ll use the Channel option to embed a YouTube channel in the widget.

Just like that, you’ve created a new YouTube widget. In step 3, you can connect the widget to YouTube and add your source.

Step 3: Add Your YouTube Widget Source

After you’ve created the widget, YouTube Feed Pro will ask you for a source so that the YouTube widget can show videos on your website.

For that, you can find 2 options:

  • Connect your API key
  • Link your YouTube account

By connecting your API key, you can show more types of YouTube content on your website.

So, click on the Add API Key button on the popup.

How to Create a YouTube Widget for Your Website (Step-by-Step) (9)

After that, you can get your unique API key by simply following our guide on creating and using an API Key.

Next, copy your API Key and then paste it into the popup before clicking on Add.

How to Create a YouTube Widget for Your Website (Step-by-Step) (10)

Don’t want to use an API Key? We’ve got you covered. Just click on the Connect a YouTube account instead option on the popup.

How to Create a YouTube Widget for Your Website (Step-by-Step) (11)

This will open YouTube, where you can give read-only access to the YouTube Feed Pro plugin. Using this access, the plugin will view content from YouTube and won’t make any changes to your account.

As a result, using Smash Balloon is completely safe.

To continue, click on the Allow button on the popup here.

How to Create a YouTube Widget for Your Website (Step-by-Step) (12)

Just like that, you’ve connected your new widget to YouTube. Now, it’s time to choose which YouTube content you want to show.

First, open the YouTube channel that you want to embed. You can find the channel URL at the top of the address bar.

There, copy everything after /user/ or /channel/ and then return to your site.

How to Create a YouTube Widget for Your Website (Step-by-Step) (13)

On your website, paste the code you just copied on the Channel ID or Username field before clicking on the Next button below.

Similarly, you can copy the code from the URL of your playlists, favorites list, live streams, individual videos, and more for other feed types.

How to Create a YouTube Widget for Your Website (Step-by-Step) (14)

After this, you could embed your YouTube feed in WordPress, and it would look great right out of the box.

On top of that, YouTube Feed Pro comes with powerful customization options to help you change the design of your widget.

Let’s take a look at them in step 4.

Step 4: Customize Your YouTube Widget

If you really want your YouTube widget to stand out from the rest of your content, you can choose from a collection of feed templates:

  • Default
  • Carousel
  • Cards
  • List
  • Gallery
  • Latest Video
  • Showcase Carousel
  • Widget

All you have to do is pick a template that you prefer and then click on the Next button.

How to Create a YouTube Widget for Your Website (Step-by-Step) (15)

Just like that, you can import a pre-built design for your YouTube widget.

To help you customize your widget in detail, the plugin will now show you the live feed editor. This is where you can change your feeds’ layout, color scheme, header, feed size, and much more.

How to Create a YouTube Widget for Your Website (Step-by-Step) (16)

Whenever you make any changes, you can see how your YouTube widget looks by using the live preview on the right.

First, click on the Feed Layout option on the left to get started.

How to Create a YouTube Widget for Your Website (Step-by-Step) (17)

From here, you can choose from a grid, YouTube gallery, list, or carousel layout for your widget. Each layout will embed your YouTube channel in a different way and give unique user experiences.

Clicking each layout option reveals further settings, such as how many columns to use, etc.

How to Create a YouTube Widget for Your Website (Step-by-Step) (18)

Once you pick a layout that you like, click on Save to keep your changes.

To continue customizing your widget, click on the Customize button in the top left.

Now, you can edit the colors of your widget by clicking on the Color Scheme option on the left.

With YouTube Feed Pro, you can easily change all the colors at once by selecting a color scheme.

Here, you have 4 color schemes to pick from:

  • Inherit from Theme: Make sure your widget copies the colors of your website
  • Light: Use light colors and dark font for your YouTube widget
  • Dark: Display a widget with a dark background color and a light font color
  • Custom: Manually select all the YouTube widget colors by yourself
How to Create a YouTube Widget for Your Website (Step-by-Step) (20)

Remember to click on Save to confirm your changes once you pick a color scheme.

Like before, you can click on Customize in the top left to keep on changing the design of your YouTube widget.

How to Create a YouTube Widget for Your Website (Step-by-Step) (21)

Now, click on the Header option from the left-hand panel to change how the header of your widget looks.

How to Create a YouTube Widget for Your Website (Step-by-Step) (22)

You can choose to show or hide your header by toggling the Enable option.

Below that, you can choose to show a Standard header with your channel name, logo, subscriber count, and descriptions.

Or, you can pick a Text header and write a custom piece of text for your YouTube widget header.

How to Create a YouTube Widget for Your Website (Step-by-Step) (23)

After that, click on Save to confirm your changes, just like before.

On top of that, you can use the remaining options to set your feed size, button design, visible elements, and much more. You can even curate your social media feed by adding filters from here.

Once you’re happy with the design of your YouTube widget, click on the Save button once again.

Finally, you can move on to step 5 and embed your new YouTube widget.

Step 5: Display Your YouTube Widget

Now that you’ve created your YouTube widget, it’s time to display it on your website. To embed your YouTube widget in a page, you can simply use the live feed editor.

All you have to do is click on the Embed button in the top right corner.

Now, you’ll see a popup where you can set the location for your YouTube feed widget. You can choose to display social media content on your webpage or widget-ready areas of your site.

For now, click on the Add to a Page button on the popup.

How to Create a YouTube Widget for Your Website (Step-by-Step) (25)

YouTube Feed Pro will then show you a list of the pages on your WordPress website.

To continue, select a page from the list and then click on Add.

How to Create a YouTube Widget for Your Website (Step-by-Step) (26)

This will open that page in the WordPress block editor. Now within the block editor, click the Plus (+) icon to choose a new content block.

How to Create a YouTube Widget for Your Website (Step-by-Step) (27)

Now, use the search bar at the top to look for “youtube feed” before clicking on the Feeds for YouTube widget below.

How to Create a YouTube Widget for Your Website (Step-by-Step) (28)

Doing that will embed the YouTube feed widget on your page. Now click on the Update or Publish button at the top, and your YouTube widget will be online.

Just open your website, and you can see how it looks.

How to Create a YouTube Widget for Your Website (Step-by-Step) (29)

Now let’s check out the next way to embed your YouTube feed widget.

Method 2: Create a YouTube Widget for Your WordPress Sidebar or Footer

The YouTube Feed Pro plugin also comes with a ready-made WordPress widget you can add to your website’s sidebar areas, such as your footer or sidebar.

To display a YouTube sidebar widget in WordPress, follow the steps above to create your feed widget.

Then, head to YouTube Feed » All Feeds from your WordPress dashboard and then click on your YouTube widget.

How to Create a YouTube Widget for Your Website (Step-by-Step) (30)

You’ll see your YouTube feed widget open in the live feed editor once again. Like with the previous method, click on the Embed button at the top.

Using the popup, you can choose to embed this YouTube feed widget on your sidebar or footer areas.

Just click on the Add to a Widget button here.

How to Create a YouTube Widget for Your Website (Step-by-Step) (32)

Clicking on it will send you to the Widgets page of your website, where you can manage the widgets on your sidebar or footer.

Want to show the YouTube feed widget on the sidebar? Click on the Sidebar panel.

How to Create a YouTube Widget for Your Website (Step-by-Step) (33)

If you want to show YouTube content on the footer, then you can click on Footer here.

For now, we’ll go with the sidebar for our example.

How to Create a YouTube Widget for Your Website (Step-by-Step) (34)

You can click on the plus icon (+) to add a new widget. After that, simply click on the Feeds for YouTube widget from the options.

How to Create a YouTube Widget for Your Website (Step-by-Step) (35)

Click on the Update, and your new YouTube feed widget will now be online.

When you navigate to the front of your website, you can see how your YouTube channel widget works.

How to Create a YouTube Widget for Your Website (Step-by-Step) (36)

For the next method, we’ll show you how to manually add a YouTube widget to your site.

Method 3: Create a YouTube Widget for Your Site Manually

If you want to create a YouTube widget for your website manually, you’ll need to copy and paste the embed code from YouTube onto your site.

Since you need to go back and forth to paste the embed code for each video, using this method takes much longer. What’s more, it doesn’t offer the same level of customization you can achieve with a WordPress plugin.

In fact, to get your widget looking exactly how you want, you might need to hire a developer.

That said, there are 2 ways to manually create a YouTube widget in WordPress, which include:

  • By pasting a YouTube video URL directly into your WordPress editor
  • Copying the iFrame embed code from the video’s share option

Neither of these methods lets you display a complete feed of videos, limiting your widget to showing only 1 video.

YouTube URL Method

To try the first option, first, open the YouTube video that you want to embed.

After opening the video, copy the URL from the top.

How to Create a YouTube Widget for Your Website (Step-by-Step) (37)

Once you do that, create a new page on your WordPress site by navigating to the Pages » Add New menu from your dashboard.

How to Create a YouTube Widget for Your Website (Step-by-Step) (38)

If you want to use a WordPress post instead, go to Posts » Add New from your dashboard.

For our example, we’ll use a WordPress page.

How to Create a YouTube Widget for Your Website (Step-by-Step) (39)

Then paste the URL directly in either the classic or block editor of the new post or page.

When you do that, WordPress will convert that URL into a YouTube video and then display it on your page or post.

How to Create a YouTube Widget for Your Website (Step-by-Step) (40)

You can use this method to display your widget in a sidebar too.

Simply navigate to Appearance » Widgets so you can start managing your WordPress widgets.

How to Create a YouTube Widget for Your Website (Step-by-Step) (41)

There, click on the Sidebar option to embed the video on your sidebar.

How to Create a YouTube Widget for Your Website (Step-by-Step) (42)

Want to show a video on your footer? Click on the Footer panel instead.

For this tutorial, we’ll go with the sidebar.

How to Create a YouTube Widget for Your Website (Step-by-Step) (43)

Here, click on the plus (+) icon to add a new widget and then select Paragraph from the

How to Create a YouTube Widget for Your Website (Step-by-Step) (44)

Now, simply paste the URL of your YouTube video into the paragraph widget to embed your video.

How to Create a YouTube Widget for Your Website (Step-by-Step) (45)

Finally, there’s one more way to embed YouTube content on your website.

YouTube iFrame Method

To use the more complicated iFrame method, start by finding the YouTube video you’d like to embed and click the Share icon.

On the next screen, choose the Embed option.

How to Create a YouTube Widget for Your Website (Step-by-Step) (46)

Now copy all the code provided in the box.

How to Create a YouTube Widget for Your Website (Step-by-Step) (47)

In the WordPress block editor, click the Plus (+) icon and search for the “custom html” widget. From the search results, just click the Custom HTML block from the options.

How to Create a YouTube Widget for Your Website (Step-by-Step) (48)

Next, paste your embed code inside the Custom HTML block and click Publish.

When you preview your page, it’ll look similar to the example below.

To create a YouTube widget for your site’s sidebar using this method, simply open your widgets page by going to Appearance » Widgets once again.

How to Create a YouTube Widget for Your Website (Step-by-Step) (51)

Like earlier, you can choose between a sidebar or footer panel.

Then, click on the plus (+) icon and then add the Custom HTML widget on your sidebar or footer.

How to Create a YouTube Widget for Your Website (Step-by-Step) (52)

Finally, paste the embed code into the widget to embed the YouTube video.

How to Create a YouTube Widget for Your Website (Step-by-Step) (53)

Now drag the widget over to your chosen sidebar, paste the embed code, and click Save.

And there you have it!

We hope this article helped you learn how to create a YouTube widget for your website. With the help of YouTube Feed Pro, you can have a widget of engaging videos on your site in just minutes.

Now all that’s left is for you to use the instructions provided here to drive tons of engagement with new video content.

Ready to embed YouTube widgets? Click here to get started with Youtube Feed Pro.

Want to create popular videos on Instagram? You can just follow our complete guide on how to make popular Instagram videos.

If you enjoyed this article, feel free to follow us on Twitter and Facebook for more social media marketing tutorials.

How to Create a YouTube Widget for Your Website (Step-by-Step) (54)

Stacey Corrin

See Full Bio

How to Create a YouTube Widget for Your Website (Step-by-Step) (2024)

References

Top Articles
Latest Posts
Article information

Author: Moshe Kshlerin

Last Updated:

Views: 5906

Rating: 4.7 / 5 (77 voted)

Reviews: 92% of readers found this page helpful

Author information

Name: Moshe Kshlerin

Birthday: 1994-01-25

Address: Suite 609 315 Lupita Unions, Ronnieburgh, MI 62697

Phone: +2424755286529

Job: District Education Designer

Hobby: Yoga, Gunsmithing, Singing, 3D printing, Nordic skating, Soapmaking, Juggling

Introduction: My name is Moshe Kshlerin, I am a gleaming, attractive, outstanding, pleasant, delightful, outstanding, famous person who loves writing and wants to share my knowledge and understanding with you.