PostX

  1. Home
  2. Docs
  3. PostX
  4. All Blocks
  5. YouTube Gallery

YouTube Gallery

The YouTube Gallery Block lets you display videos and playlists on your site using the API. It fetches thumbnails, titles, and content automatically.

This block makes it easy to showcase your channel or playlists in clean, responsive layouts. Your video content updates and syncs dynamically.

How to Get an API from YouTube

First, you have to get the credentials from Google Cloud Console. From there, you have  to follow the steps described below:

Create a Project

You have to create a project if you don’t have one. Click the New Project, set a unique name for your project, and click the Create button.

Now select the project you just created.

Select the project

Get the API

To get the API, you have to create credentials first. Go to APIs and Services from the quick access section.

api and services

Then go to Credentials from the left sidebar.

go to credentials

Click the Create credentials button and select API key. 

create credentials

Now, give a unique name for the key and click the create button.

create api key

A unique API will be created, save it for future use.

copy the api key

Enable the API for YouTube

Now you have to enable this API for YouTube. 

Go the the Enabled APIs and Services option from the left sidebar. And click the Enable APIs and Services button.

enable api

In the API library, search for YouTube Data API v3 and enter it.

youtube data api v3

Then enable the YouTube Data API v3.

enable youtube data v3 api

Finally, your API for YouTube is activated.

Get the Channel/Playlist ID

In addition to the API, you will need a channel or playlist ID to show the videos on the YouTube gallery block. You can get the IDs from YouTube.

For Playlist ID

You can use the playlist URL simply to fetch the video, but if you want to find out the ID and use here’s how you can do it.

For that, go to the playlist on YouTube and focus on the URL of the playlist. In the URL, copy the ID after list=.

playlist id

For Channel ID

Go to the Settings > Advanced Settings of your YouTube channel.

youtube channel advanced settings

Here, you can find your channel ID. Save it for further need.

copy channel id

If you want to show videos from other channels, go the the channel homepage on YouTube and click on more. You will find the description and other additional info. Scroll down and click the share channel button. From there, you can copy the channel ID and use it.

Show Videos from Your YouTube Channel or Playlists with the PostX’s YouTube Gallery Block

Now you have to add the YouTube Gallery block to your Page.

add youtube gallery block

Start by inserting the API key you saved from Google Cloud Console previously. Then add the channel/playlist ID you got from your channel.

add api and id

You can also sort the videos by date, relevance, popularity, etc. You can choose to hold no cache or for a specific period of time.

NOTE: To show a playlist, you can simply put the URL in the box. Or you can use the ID as well.
But to show all the videos from a channel, you have to use the channel ID.

Gallery Layout

You can change the layout by choosing classic, playlist, or inline layout here. You can set how many columns and videos will be there.

gallery layout

For classic and inline layout, you can choose to show a load more button with personalized button text. 

For playlist layout, you can change the playlist height.

Playlist layout

Gallery Single Item

Here, you can decide to show the title outside of the thumbnail or in the overlay. You can also set the height of the image used in the thumbnail.

gallery single item

Moreover, you can choose to show the video titles and description, and change their length.

In the video/player option, you can set the functions of the videos – autoplay, loop, mute, etc.

video player option

Styling

From the style tab, you can set the block’s spacing & border, content typography & color, play icon, and button’s style. It’s basically for your appearance design and aesthetics.

Advanced settings

In the advanced settings of PostX’s YouTube Gallery block, you can set a custom ID for the block, change the value of z-index, background color, margin & border, and responsive settings.

Was this article helpful to you? Yes No