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:
- You need a Google Account to access the Google API Console, request an API key, and register your application.
- Create a project in the Google Developers Console and obtain authorization credentials so your application can submit API requests.
- After creating your project, make sure the YouTube Data API is one of the services that your application is registered to use:
- Go to the API Console and select the project that you just registered.
- 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:
https://www.youtube.com/playlist?list=PL3VM-unCzF8ipG50KDjnzhugceoSG3RTCso 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:
