Web Development: How to Use the WordPress Responsive YouTube Playlist Video Player Plugin

How to Use the WordPress Responsive YouTube Playlist Video Player Plugin

In this post, I'm going to review the WordPress Responsive YouTube Playlist Video Player plugin, which allows you to integrate a video player which is capable of playing YouTube playlists seamlessly.

For websites that deal with a lot of video streaming content, it’s important that they should organize their content in a way which is appealing and intuitive to end users. Also, 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 at 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.

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. Although 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 to build 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’ve 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 includes 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 colors of almost each and every player control.

So that was a brief introduction of 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 as 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 and you can easily get it 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 like 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 on the right sidebar. You can click on any of them 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 player controls customization. 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.

When it comes to changing colors, this plugin allows you to change 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 done 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’ve 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 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.

Conclusion

Today, I took an 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!

Web Development

Friday, October 18, 2019