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!
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.
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
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:
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.
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.
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.
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.
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.
Choosing the grid layout, for example, displays your responsive YouTube videos in an organized grid with uniform thumbnails.
Interested in a layout that displays 1 large video with several thumbnails below? Then a YouTube gallery is your best choice.
For a more minimalist design, you can select the list layout to display your responsive YouTube videos in a single column.
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:
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.
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:
- To your page or post in WordPress, or,
- 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.
If you’re using the classic WordPress editor, then just copy this shortcode and paste it into your 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.
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.
So, when you visit your website, you can see your responsive videos embedded on your sidebar area:
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?