YouTube Playlist Bricks Query Loop

Updated on 16 Feb 2024

In the BricksLabs Facebook group a user asked:

I've been battling to display a YouTube Playlist in grid form on a site. The Bricks Video element does not allow for playlists.

From searching Bricks community platforms, most suggestions are to use a 3rd party plugin.

Is it at all possible to do this without a 3rd party plugin? If so; - I'd love to see a tutorial on this.

This Pro tutorial provides the steps to register a custom query type, which, when selected, enables you to use Bricks elements like Video, Heading, and Image to output the embedded video iframe, title, and thumbnail of videos of a specified YouTube playlist in a Bricks query loop.

We shall use YouTube Data API.

Step 1

Go to the Google Cloud Platform Console and get an API key for the YouTube Data API.

The general outline is that you’d first create a Project, switch to it, go to "APIs and services", click "Enable APIs and Services" button, search for youtube, click "YouTube Data API", enable it, go to Credentials, create a credential of API key type to get the API key.

Details:

1. You need a Google Account to access the Google API Console, request an API key, and register your application.
2. Create a project in the Google Developers Console and obtain authorization credentials so your application can submit API requests.
3. After creating your project, make sure the YouTube Data API is one of the services that your application is registered to use:
   1. Go to the API Console and select the project that you just registered.
   2. Visit the Enabled APIs page. In the list of APIs, make sure the status is ON for the YouTube Data API v3.

Step 2

Keep your desired YT playlist's ID handy.

In this example, we shall use this playlist:

so the ID is: PL3VM-unCzF8ipG50KDjnzhugceoSG3RTC

Step 3

Add the following in child theme's functions.php (w/o the opening PHP tag) or a code snippets plugin: