In this post, I'm going to review the WordPress Responsive YouTube Playlist Video Player plugin, which allows you to integrate a video player that's capable of playing YouTube playlists seamlessly.
Websites that deal with a lot of video streaming content should organize their content in a way which is appealing and intuitive to end users. It should be a part of their advertising strategy as well. Specifically, if you’re looking for a better way to represent your niche YouTube content, you’re in the right place!
When it comes to embedding YouTube content, there are thousands of free plugins and scripts available online. You’ll also find commercial options that provide ready-to-use features and extended support. In the case of commercial options, you should also expect quality code, bug fixes, and new enhancements.
WordPressBest Video Background Plugins for WordPress
WordPressFree WordPress Video Player Plugins
WordPress PluginsTop WordPress Audio and Video Plugins of 2019
WordPressHow to Add the Stellar Video Player to Your WordPress Site
Today, we’re going to explore one of the most popular plugins available at CodeCanyon: WordPress Responsive YouTube Playlist Video Player. It allows you to embed your YouTube content in different ways, whether as a playlist, channel, or single video. Also, it comes with a custom designed interface instead of YouTube’s default interface.
Let’s quickly go through the important features WordPress Responsive YouTube Playlist Video Player brings:
- support of YouTube playlist, channel playlist or a single video
- responsive with intelligent resizing
- interface customization
- latest YouTube v3 data API
- AJAX-based pagination with unlimited number of videos
- horizontal and vertical layouts
- and many more
This plugin provides a lot of useful features that allow you to embed your YouTube content effortlessly.
Our Agenda
There are different ways you could use this plugin and customize your output. In this post, we’re going to build a full-fledged horizontal YouTube player by embedding a YouTube playlist by ID.
The outcome of our process will look like this:
Throughout this tutorial, we’ll explore different aspects of this plugin while moving closer to our goal of building a YouTube playlist video player. In the next section, I'll show you how to download and install this plugin.
Installation and Register Your Own YouTube API Key
In this section, you’ll see how to install and configure the WordPress Responsive YouTube Playlist Video Player plugin once you’ve purchased and downloaded it from CodeCanyon. For this post, I’ve used WordPress 5.2.3, and the plugin version is 1.11.0. I recommend that you install the plugin if you want to follow along with this post.
The player uses YouTube’s Data API V3, and in order to use the API you will need an API key. If you do not register your own private API key, the default key will be used. However, the default key is used by lots of other users who haven’t entered their own key, and the API only has a limited number of requests it can make per key. So it’s always a good idea to have your own key to make sure there’s no outage if you have a high-traffic website.
If you don’t know how to register the YouTube API key, the plugin provides a nice guide which explains it in detail. When you access the main plugin page on the admin side, there’s a message telling you to enter your own API key. Click on the REGISTER KEY button to open the guide. Follow the instructions in the guide and get your key.
Once you get your API key, you just need to enter it in the GENERAL SETTINGS section of the plugin, as shown in the following screenshot.
In the next section, we’ll go through the different configuration sections this plugin provides.
Plugin Configuration Options
In this section, we’ll quickly go through the different configuration options provided by the WordPress Responsive YouTube Playlist Video Player plugin.
Once you install this plugin, you can access it by clicking on the YouTube link in the left sidebar.
General Settings
In this section, you can configure generic settings related to pagination, autoplay, and GDPR. And, as we discussed earlier, you can register your YouTube API key in this section.
Appearance
As the name suggests, you’ll find settings related to the visual aspects of your player in this section. A couple of important settings include playlist layout, player width, HD display, and a few text-related settings.
Controls
When you want to customize a player, it’s important that you should be able to choose among the different player controls. This section allows you to hide or show different player controls as per your requirements.
Colors
This section allows you to configure the colors of almost each and every player control.
So that was a brief introduction to the configuration options provided by this plugin. In the next section, we'll build a full-fledged horizontal YouTube player by embedding a YouTube playlist by ID.
Create a YouTube Player With a Horizontal Playlist Layout
YouTube playlists can be added onto your posts or pages by using the shortcode button in the editor, as shown in the following screenshot:
When you click on that button, it opens up the popup shown in the following screenshot.
As you can see, there are different ways you can add your YouTube content to your site. In our case, as we’re going to embed the YouTube playlist, we’ll use the first option: YouTube Playlist. To embed the YouTube playlist, you’ll need a playlist URL, which you can easily get from your YouTube channel page. Of course, if you haven’t created any playlists yet, you’ll have to create one first. In any case, you should end up with a playlist URL like https://www.youtube.com/playlist?list={YOUR_PLAYLIST_ID}.
Once you get your playlist URL, insert it into the YouTube Playlist field as shown in the following screenshot, and click on the INSERT button.
Your shortcode will be generated and added to your page or post. In my case, I’ve created a new page. The shortcode should look like:
[ytp_playlist source="PLMP2_J2lf0P1P7pjwaDe1ki-XQjaP5P1j"]
Go ahead and publish the page to see how it looks in the front-end.
So that’s the default view of what it looks like. The main video is on the left side, and the other videos in the playlist are in the right sidebar. You can click on any video to play it. It’s the vertical playlist type in the terminology of this plugin.
In our case, we want to show the other videos in the playlist horizontally. You can control this layout by supplying the playlist_type parameter in the embed code. In fact, this plugin provides a lot of customization options through the shortcode that allows you to control different aspects of the YouTube player. It’s not possible to discuss all the options, but we’ll highlight the ones that are required for our use-case.
Firstly, let’s add the playlist_type parameter, as shown in the following snippet.
[ytp_playlist source="PLMP2_J2lf0P1P7pjwaDe1ki-XQjaP5P1j" playlist_type=”horizontal”]
Next, we want to make sure the player is responsive—this is done by using the width_type parameter.
[ytp_playlist source="PLMP2_J2lf0P1P7pjwaDe1ki-XQjaP5P1j" playlist_type=”horizontal” width_type=”responsive”]
Next, we want to make sure that the video quality is HD and the YouTube logo is hidden.
[ytp_playlist source="PLMP2_J2lf0P1P7pjwaDe1ki-XQjaP5P1j" playlist_type=”horizontal” width_type=”responsive” force_hd hide_youtube_logo]
The settings we have done so far are specific to customizing the player controls. Somehow, I feel that we also need to change the color of a few controls so that they look more intuitive. So let’s change a couple of color settings at YouTube > COLORS.
This plugin allows you to change the colors of different controls. In my case, I have tried to change colors as shown in the following screenshot. Of course, you could experiment on your own to find a color theme which works for your site.
With all the changes we’ve made so far, the player should look as follows:
As you can see, there are customization options for each and every aspect of the player. In this post, we embedded a YouTube playlist, but you can also embed a channel or a single video. I'll leave that to you as an exercise! Of course, you could always ping me using the feed below if you have any queries.
Other Possible Uses
In this post, we discussed how you can add a player for a YouTube playlist to your WordPress site. As we discussed earlier, the WordPress Responsive YouTube Playlist Video Player plugin is also capable of playing different kinds of YouTube content. You could also use it to integrate:
- YouTube channels
- YouTube users
- YouTube single videos
- YouTube multiple videos by comma-separated IDs
The Next Step: Other WordPress Media Scripts
If you're looking for other WordPress media scripts that you could use right away, I recommend that you check out the following scripts that are available for a low cost.
- WordPressBest Video Background Plugins for WordPress
- WordPressFree WordPress Video Player Plugins
- WordPress PluginsTop WordPress Audio and Video Plugins of 2019
- WordPressHow to Add the Stellar Video Player to Your WordPress Site
Conclusion
Today, I took the opportunity to introduce the WordPress Responsive YouTube Playlist Video Player plugin available at CodeCanyon. It’s a commercial media player plugin which allows you to embed different types of YouTube content effortlessly. Moreover, it also allows you to customize the look and feel of the player as per your requirements.
I hope that you've enjoyed this article, and feel free to post your thoughts using the feed below!
No comments: