How to Create a YouTube Widget for Your Website

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:

  1. Create a YouTube widget with a WordPress plugin
  2. Add a YouTube widget to your WordPress sidebar
  3. 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.

WordPress widgets can display any content from user registration forms to your most recent articles. So a YouTube widget, in this sense, will display your channel’s content in those 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…

  1. A block of any type of content added to widget-ready areas of WordPress
  2. YouTube-specific content added to WordPress with an embed code or plugin

Should You Use a YouTube Plugin for WordPress?

Should you use a youtube WordPress plugin?

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.

WordPress plugins are an excellent way to enhance your website’s functionality without needing to learn to code or hire a developer. Whereas using the manual method requires you to work with CSS, JavaScript, and other coding languages.

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

Click the blue button to connect your youtube 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 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.

choose a youtube 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, gallery, list, or carousel layout for your feed. Clicking each layout option reveals further settings such as how many columns to use, etc.

choose a layout for your youtube playlist in WordPress

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.

choose which information to display in your YouTube widget

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.

translate the different info labels on your YouTube widget

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.

configure the settings for your YouTube widget header

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.

Feeds for YouTube WordPress plugin - Customize 4

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.

choose a call to action for your YouTube widget

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:

  1. YouTube Feeds WordPress Block: Add your YouTube widget to posts or pages using the WordPress block editor
  2. 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.

add the feeds for youtube block to your page

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.

preview of your YouTube widget in the WordPress editor

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.

Live YouTube widget on your website

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.

paste your youtube feed shortcode directly into the classic WordPress editor

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.

Add the YouTube plugin widget to your sidebar in WordPress

When you navigate to the front of your website, you’ll see your YouTube sidebar widget ready to go.

Live youtube widget added to WordPress sidebar with a plugin

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:

  1. By pasting a YouTube video URL directly into your WordPress editor
  2. 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.

Embed a youtube video in the classic wordpress editor

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.

manually embedded youtube video

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.

Embed a youtube video in a wordpress sidebar widget area

Here’s an example of how this will look when you preview your widget:

YouTube video sidebar widget embed

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.

choose the embed share option in YouTube

Now copy all the code provided in the box.

Copy the iFrame embed code

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.

Choose the custom html block

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

paste the iFrame code into the custom html block

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

YouTube video published with an iFrame embed

For the classic WordPress editor, you’ll need to paste the embed code in the editor’s Text section as you can see below:

Paste your iframe embed code in the Text section of the classic WordPress editor

To create a YouTube widget for your site’s sidebar using this method, navigate to Appearance » Widgets, and find the Custom HTML widget.

paste the youtube iframe embed code into the custom html sidebar 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.

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