How to Create a YouTube Widget for Your Website (Step-by-Step)
Home Blog How to Create a YouTube Widget for Your Website (Ultimate Guide)

How to Create a YouTube Widget for Your Website (Ultimate Guide)

How to Create a YouTube Widget for Your Website

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, the instructions can be overwhelming.

In this article, we’re going to share several methods for creating a YouTube Widget for your site. You can then delight your visitors with engaging visual content, keep them on your site for longer, and even grow your YouTube channel.

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

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.

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 reviews, testimonials, and product demonstrations from 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 to your website visitors so you can get interested people to join in
  • 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.

manually embed youtube video

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.

youtube feed pro plugin smash balloon

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.

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, Smash Balloon.

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 Add New button.

add new youtube feed.

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.

choose your youtube feed type.jpg

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.

api key required youtube feed pro

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.

add api key youtube

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.

connect your youtube account

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.

allow read only access youtube feed pro

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. At the top, you can find the URL of this YouTube channel.

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

copy the username youtube channel

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.

enter source for youtube feed

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.

pick a feed template youtube feed pro

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.

live feed editor youtube feed pro

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

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

open feed layout options youtube feed pro

From here, you can choose from a grid, YouTube gallery, list, or carousel layout for your widget. Clicking each layout option reveals further settings such as how many columns to use, etc.

feed layout options youtube feed pro

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
color scheme options for your youtube widget

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.

color scheme option youtube widget

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

open header options youtube feed

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.

header options youtube feed pro

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

embed your youtube feed

Now, you’ll see a popup where you can set the location for your YouTube feed widget.

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

embed to a page youtube feed

YouTube Feed Pro will then show you a list of the pages on your website. To continue, select a page from the list and then click on Add.

select your page wordpress

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.

add a block wordpress page

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

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.

example youtube feed on your website

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.

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.

embed your youtube feed

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.

embed to a widget youtube feed pro

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.

open sidebar panel

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.

open footer panel

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.

add youtube widget to your site

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 it looks.

show youtube video feed on your wordpress sidebar

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.

copy your url youtube video

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

new page for youtube feed

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.

add new post wordpress

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.

manually embed youtube video

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.

widgets page wordpress

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

open sidebar panel

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

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

open footer panel

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

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

embed youtube video widget

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.

embed button youtube video

Now copy all the code provided in the box.

embed button youtube video

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.

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.

widgets page wordpress

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.

add the custom html widget

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

paste your embed code youtube

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. Now all that’s left is for you to use the instructions provided here to drive tons of engagement with new video content.

Click here to get started with Youtube Feed Pro by Smash Balloon.

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

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

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.