Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 19, 2019 03:14 am

How to Use the WordPress Responsive YouTube Playlist VideoPlayerPlugin

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. 

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:

Completed YouTube video player

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.

Register Key Message

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.

General settings - Register Key

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:

Embed Button

When you click on that button, it opens up the popup shown in the following screenshot.

Embed Button Popup

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.

Insert Playlist URL

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:

Go ahead and publish the page to see how it looks in the front-end.

Demo without Customization

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.

Next, we want to make sure the player is responsive—this is done by using the width_type parameter.

Next, we want to make sure that the video quality is HD and the YouTube logo is hidden.

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.

Color Changes

With all the changes we’ve made so far, the player should look as follows:

Customized Player Demo

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.

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!


Original Link: https://code.tutsplus.com/tutorials/how-to-use-the-wordpress-responsive-youtube-playlist-video-player-plugin--cms-34043

Share this article:    Share on Facebook
View Full Article

TutsPlus - Code

Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.

More About this Source Visit TutsPlus - Code