How to Embed Responsive YouTube Videos on WordPress (Easy)

By Lianne Laroya on December 29, 2020

Do you want to embed responsive YouTube videos on WordPress? You’re on the right track.

Cross-promoting your video content to your website is a great way to get more subscribers. Adding your YouTube feed to your site also helps you reach more customers and get ahead of the competition. Over 500 hours of video is uploaded every minute to YouTube, after all.

But the instructions for embedding responsive YouTube videos on WordPress can be confusing. Especially if you’re not tech-savvy.

So in this article, you’ll learn the simplest way to add responsive YouTube videos to your site. By following this tutorial, you can display your responsive videos on WordPress in just under 5 minutes!

embed responsive youtube video wordpress example

Ready? Let’s begin.

Ways to Embed Responsive YouTube Videos

As mentioned, adding responsive YouTube videos to your website can be hard, especially if you don’t have any coding knowledge. So, some of the methods for embedding responsive videos may be too overwhelming and tricky to follow.

1. Copy a YouTube video’s embed code, paste it into your website and manually edit code snippets to make your video responsive.

2. Use a trusted WordPress plugin to embed responsive YouTube videos for you — automatically.

The 1st method isn’t fit for beginners since it involves multiple websites and lots of confusing code that you’d need to tweak. Doing this can also accidentally break your site because you’re pasting the code directly into your WordPress.

embed responsive youtube video wordpress no code

Plus, it’s complicated to customize your YouTube video’s settings if you use the 1st method because you’d need to change code snippets once again. There’s also no support team to hold your hand during the whole process.

But if you use a WordPress plugin to add responsive YouTube videos to your website, you won’t have these issues anymore.

With the help of the best YouTube plugin for WordPress, Feeds for YouTube, you can easily:

  • Embed fully responsive YouTube videos on your website
  • Display your YouTube channel, playlists and even favorites in different layouts
  • Customize how your videos and videos feed will look like with just a few clicks
  • Control the information you show in your YouTube videos
  • Add multiple YouTube videos to WordPress in just under 5 minutes
  • Create custom YouTube feeds using advanced YouTube search queries

embed responsive youtube video wordpress plugin

The best part? You can do all of these without touching any code snippets or hiring an expensive developer to help you. You can easily embed responsive videos on your website — no technical knowledge needed.

And if you’re worried about the plugin slowing down your website, then you don’t need to be. It’s built with its users in mind, so Feeds for YouTube Pro is designed to be ultra fast.

And did we mention that the plugin comes with access to the world’s best customer support team? Don’t just take our word for it — check out the testimonials from happy customers:

feeds for youtube support

Excited to see your business grow via video marketing? We’ll show you how to embed responsive YouTube videos to your website using the easiest way below.

Easiest Way to Embed Responsive Videos

With the help of the plugin, you can easily display responsive YouTube videos to your WordPress, even if you don’t have any technical knowledge. Just follow the steps below to get started.

Step 1: Install Feeds for YouTube Pro Plugin

First, get your own copy of Feeds for YouTube Pro plugin here.

After downloading the plugin, the next step is installing it to your WordPress website. You can follow these step-by-step instructions on how to install a WordPress plugin for your guidance.

Step 2: Connect Your YouTube Account

Next, click the Feeds for YouTube menu you can find in your WordPress dashboard.

Under the Configure tab, click on the blue Connect to YouTube to Create a Feed button so you can link your YouTube account to the plugin.

Click the blue button to connect your youtube account

On this page, you can also create an API key to access more helpful features of the plugin. For more details on how you can do this, just follow this step-by-step tutorial on how to create and use an API Key.

Once you’re done connecting your YouTube account to the plugin, you can move on to the next step below.

Step 3: Choose Your YouTube Videos’ Feed Type

Using the plugin, you can select from different feed types where your videos will be sourced from.

It doesn’t matter which feed type you choose. The plugin will automatically make your videos responsive so they’ll look great on any device and screen size.

That said, here are the 6 feed types you can choose from:

  • Channel: Add responsive videos from a specific YouTube channel.
  • Playlist: Add responsive videos from your chosen YouTube playlist.
  • Favorites: Embed responsive videos marked as “favorites” by your chosen YouTube channel.
  • Search: Display responsive YouTube videos based on specific search words or phrases.
  • Live Streams: Add responsive videos of upcoming or existing YouTube live streams.
  • Single Videos: Display responsive YouTube videos individually.

In this tutorial, we’ll show responsive YouTube videos from WPBeginner’s YouTube channel. So click the channel feed type to source the videos from this specific channel.

embed responsive youtube video wordpress channel

Then, just go to the YouTube channel’s page you want to embed and check out its URL. The characters after “channel/” is the channel’s ID or username. Copy and paste it into the channel ID field.

find youtube channel ID

Remember to click on Save Settings to preserve your choices. Then, move on to the next step below.

Step 4: Customize Your Responsive YouTube Videos Feed

The plugin can automatically display a feed of responsive YouTube videos with minimal effort on your part.

Since it copies your existing theme’s design, your feed looks consistent with your brand’s visuals. Plus, because the plugin automatically makes your videos responsive, they look fantastic on any screen.

And if you want to have more control over how your videos feed looks like? No worries. The plugin also lets you have full control over your feed’s design, color and layout.

To start, scroll to the topmost part of your settings page. Then, click on the Customize tab. On this page, you can change your feed’s width, height and background color with just a few clicks.

embed responsive youtube video wordpress customize

Now, if you want to change your feed’s layout, you can do this as well. Simply scroll down until you reach the layout section.

embed responsive youtube video wordpress layouts

Choosing the grid layout, for example, displays your responsive YouTube videos in an organized grid with uniform thumbnails.

embed responsive youtube video wordpress grid

Interested in a layout that displays 1 large video with several thumbnails below? Then a YouTube gallery is your best choice.

embed responsive youtube video wordpress gallery

For a more minimalist design, you can select the list layout to display your responsive YouTube videos in a single column.

embed responsive youtube video wordpress list

Finally, if you want to show your responsive YouTube videos in a scrolling format, you can use the carousel layout. Here’s what a YouTube slideshow looks like below:

embed responsive youtube video wordpress carousel

Once you’re done selecting your responsive YouTube feed’s layout, click on Save Changes to finalize your choice.

Scrolling further down to the Info Display section gives you more options to customize how your feed looks like, and what type of information you choose to display.

embed responsive youtube videos info display

When you’re happy with your feed’s design, click on Save Changes and move on to the final step below.

Step 5: Embed Responsive YouTube Video Feed on Your WordPress

With the plugin’s help, you can add a responsive YouTube video feed:

  1. To your page or post in WordPress, or,
  2. To your sidebar or other widget-ready areas in WordPress

Let’s look at both options.

Embed Responsive YouTube Videos on WordPress Page

Start by creating a new page. You can do this by going to Pages » Add New from your WordPress dashboard.

add new page

If you’re using the classic WordPress editor, then just copy this shortcode and paste it into your editor: [youtube-feed]

paste your youtube feed shortcode directly into the classic WordPress editor

Click on Preview to see how your videos will look like on your website. And if you want to make it live on your site, then click on Publish.

Now, if you’re using the block editor, the plugin has a ready-made widget for you. You can access it by clicking the Plus (+) icon inside your editor. Then, search for “youtube” and click the Feeds for YouTube block to add it into your page.

embed responsive youtube video wordpress block

Doing this automatically gives you a preview of what your responsive YouTube videos feed will look like embedded on your page.

To make the responsive videos feed live on your website, click on Publish.

Embed Responsive YouTube Videos on WordPress Sidebar

If you’d rather embed your responsive videos on your sidebar, you can do that with the plugin as well.

From your WordPress dashboard, navigate to Appearance » Widgets. Then, under Available Widgets, click on the YouTube Feed widget and drag it to your sidebar area. Finally, click on Save to publish your YouTube videos on your website.

embed responsive youtube video wordpress widget

So, when you visit your website, you can see your responsive videos embedded on your sidebar area:

embed responsive youtube video wordpress example

And so, that’s it! Now, by following the steps in this tutorial, you know how to easily embed responsive YouTube videos on your WordPress.

With the help of Smash Balloon’s powerful and easy-to-use Feeds for YouTube plugin, you can create fully customizable and responsive YouTube video feeds and display them on your website.

So, what are you waiting for?

Get started with Feeds for YouTube here.

Also, if you found this guide helpful, go ahead and follow us on Twitter and Facebook for more useful YouTube tutorials.

Want to Try our YouTube plugin for Free?

Enter the URL of Your WordPress website to install Feeds for YouTube Lite.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *