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:
- Create a YouTube widget with a WordPress plugin
- Add a YouTube widget to your WordPress sidebar
- Embed a YouTube widget manually
Let’s get to it!
What is a YouTube Widget?
The term “YouTube widget” can have different meanings in WordPress.
First of all, a “widget” in WordPress, is a block of content you can add to your website’s sidebar, footer, and other widget-ready areas.
Secondly, a YouTube widget can also refer to YouTube-specific content added to your site’s posts, pages, and other areas with an embed code or WordPress plugin.
To recap, a YouTube widget is…
- A block of any type of content added to widget-ready areas of WordPress
- YouTube-specific content added to WordPress with an embed code or plugin
Should You Use a YouTube Plugin for WordPress?
Now that you know what a YouTube widget is, you might be wondering if you should create a YouTube widget for your website manually or with a WordPress plugin.
You’ll also find that the best WordPress plugins for YouTube come with tons of features designed to make your widget look great with minimal effort.
For instance, with a few simple clicks, you can make your widget display YouTube content from your favorites, YouTube playlists, live-streams, and more.
This level of customization isn’t something you can achieve when creating a YouTube widget for your website manually. That is unless you hire a developer or have experience with coding.
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 Feeds for YouTube WordPress plugin.
Feeds for YouTube 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.
Click here to get started with Feeds for YouTube.
Once you’ve downloaded the plugin to your computer, follow these steps to install a WordPress plugin.
Step 1: Configure Your YouTube Widget
After you’ve installed the plugin, click Feeds for YouTube from your WordPress dashboard to view the configuration page. This page is where you can link your YouTube channel to your website.
To do that, click the blue button with the label “Log in to YouTube and connect an account.”
When your account is connected successfully, scroll to the Feed Type section. This is where you can choose the type of YouTube content to display in your widget.
The different feed types included are:
- A feed displaying content from a YouTube channel using a channel ID or username
- Show specific playlists in a feed by entering the YouTube playlist ID
- The favorites feed type shows all videos marked as “favorites” by a YouTube account
- Use the search feed type to show content based on specific search terms or phrases
- Display a single upcoming or live streaming video in your feed
- Show individual videos sorted in order
Click the radio button beside your chosen feed type and click the Save Changes button. For this tutorial, we chose the Channel feed type.
At this stage, you could embed your YouTube feed in WordPress, and it would look great without tweaking any settings.
Step 2: Customize Your YouTube Widget
If you really want your YouTube widget to stand out from the rest of your content, click the Customize tab at the top of your screen. This is where you can change your feeds’ layout, information displayed in each youtube post, and individual styling options.
Under the Layout heading, you can choose from a grid, YouTube gallery, list, or carousel layout for your feed. Clicking each layout option reveals further settings such as how many columns to use, etc.
Below is the Info Display section, where you can show or hide different pieces of information on your YouTube widget. For example, you can hide the play icon, date, username, and more.
The next section lets you change the labels for specific information. This is useful if you don’t have an English speaking audience and need to translate a few things.
In the Header section directly beneath, you can choose to show or hide your channel description and number of subscribers. If you want a more minimal layout, you can untick all these options to hide the header entirely.
After that are the Load More and Subscribe Button sections. The Load More button lets users click to reveal more videos at the end of your feed. The Subscribe button gives visitors the chance to follow your YouTube channel without having to leave your site, helping you secure more YouTube subscribers.
Up next is the Video Experience section. In this area, you can set your video player size ratio and select if your video should play automatically or when clicked. This is also where you can change the call to action shown when a user pauses or ends your video.
You can choose between:
- Related Videos from the channel
- A Custom Link you define
- YouTube Default suggested videos
If that isn’t enough customization options, further on down the page, you can moderate content by including or excluding words, hashtags, or phrases. You can also tweak your design with custom CSS and access more advanced settings.
When you’re happy with everything, click Save Changes.
Step 3: Display Your YouTube Widget
Now that you’ve created your YouTube widget, it’s time to display it on your website. The Feeds for YouTube plugin offers 2 ways to publish your video content, including:
- YouTube Feeds WordPress Block: Add your YouTube widget to posts or pages using the WordPress block editor
- YouTube Feeds Shortcode: Use the provided shortcode to display your YouTube widget in posts or pages using the classic WordPress editor, or elsewhere within your WordPress theme.
To embed your YouTube widget in a post or page using the WordPress block editor, first head to Pages » Add New to create a new page.
Then within the block editor, click the Plus (+) icon to choose a new content block. You’ll find the YouTube feed block in the Widgets section.
Clicking the block inserts it into your page with a preview of how your feed will look. This helps you decide if you need to make any changes before clicking Publish.
Now when you preview your page, you’ll see your YouTube widget live on your website, waiting for your readers to engage with your content.
If you’re still using the classic WordPress editor, you can embed your YouTube widget using a shortcode.
Inside the page editor, simply paste the shortcode, as shown below.
Method 2: Create a YouTube Widget for Your WordPress Sidebar
The Feeds for YouTube plugin also comes with a ready-made WordPress widget you can add to your website’s sidebar areas such as your footer, or primary sidebar.
To display a YouTube sidebar widget in WordPress, follow the steps above to configure your feed. Then navigate to Appearance » Widgets to view your available WordPress widgets.
Scroll down until you find the YouTube Feed widget. Then drag the widget over to your chosen sidebar area. Now give your widget a name and click Save.
When you navigate to the front of your website, you’ll see your YouTube sidebar widget ready to go.
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. Using this method takes a little longer and 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 let you display a complete feed of videos, limiting your widget to showing only 1 video.
YouTube URL Method
To try the first option, find the video you’d like to display and copy the URL.
Then paste the URL directly in either the classic or block editor of the new post or page.
WordPress automatically displays the video on your page or post. So when you preview the page, you’ll see a video player widget similar to the example below.
You can use this method to display your widget in a sidebar too.
Simply navigate to Appearance » Widgets and find the Text widget. Drag the widget over to your chosen sidebar, paste your video URL and click Save.
Here’s an example of how this will look when you preview your widget:
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.
Now copy all the code provided in the box.
In the WordPress block editor, click the Plus (+) icon to add a new block and click the Custom HTML block, which you can find in the Formatting section.
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.
For the classic WordPress editor, you’ll need to paste the embed code in the editor’s Text section as you can see below:
To create a YouTube widget for your site’s sidebar using this method, navigate to Appearance » Widgets, and find the Custom HTML widget.
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 Feeds for Youtube by Smash Balloon today.