Building a dynamic YouTube video gallery

I’m working on a project right now that includes a gallery of recent YouTube videos. I had assumed we could use an existing plugin for this. It seems like a common need, and YouTube has a straightforward API, so there must be a good plugin already.

I tested about 5 popular plugins from the WordPress.org repo and they were all terrible. They all included large admin areas with confusing options, annoying up-sells to their premium version, enqueued CSS and JS files site-wide for functionality that is only on one internal page, and poor code quality.

I wasn’t comfortable installing any of these plugins on my client’s site, so I decided to build my own.

Getting Started

I’m creating a shortcode, [ea_youtube_gallery], that will display a video gallery. There will be a large video player at the top, and thumbnails of recent videos below it. Clicking the thumbnail will update the player to display that video.

First, I create the base shortcode with placeholder content:

Accessing YouTube Data

We’re ultimately going to do a search request to get the recent videos. The request will use the channelId parameter, so first we need to convert the username into a Channel ID using a channels request. And we’ll need an API key to do all of these requests.

API Key

1. Log into Google Developer Console and create a project.
2. In the Library section, search for “youtube” and select YouTube Data API v3 (screenshot).
3. Click “Manage”, then in the left column click “Credentials” (screenshot). Click “Create Credentials > API Key” to create a new API key.

You could create a settings page for entering/storing this key, or just store it in your plugin as a constant. In my main plugin file I added:

define( 'EA_YOUTUBE_API_KEY', 'key-goes-here' );

Channel ID

I’m going to pass the username into the shortcode ( [ea_youtube_gallery user="username-here"] ), then use my ea_get_youtube_channel() shown below to get the Channel ID associated with that username. Since this ID won’t be changing, I’m going to store it in an option so I don’t have to keep making the API request. Here’s the combined code at this point.

Recent Videos

Now that we have the API key and Channel ID, we can ask for recent videos using a search request. I’m going to limit it to 24 videos. You can request up to 50, and the pageToken parameter can be used to request previous/next pages if you were to build some form of pagination, but that’s beyond the scope of my simple plugin.

I’m going to store the API response as a 24 hour transient, so I’m only asking for new videos once a day. Here’s the combined code at this point.

Putting it together

I now have a $data variable containing the YouTube API response to my request for videos. Each video has metadata like title, videoId, and thumbnails.

I’m going to use the videoId from the first video to create an embedded video. Then for the listing at the bottom, I’m going to loop through each of the videos, add the thumbnail and title, and add a data attribute containing the videoId.

Finally, using JavaScript (in my theme’s global.js file – wasn’t worth enqueuing another JS file for this), when someone clicks on a thumbnail I’ll update the embed code in the player area to use that ID, changing the video.

Here’s the combined code (shortcodes.php), along with the JS and basic styling that I included in my theme. I placed the shortcodes.php file in my core functionality plugin, which also included the API key constant.