How to display YouTube videos gallery in WordPress website?
This post is based on an exercise I did to display YouTube videos in a gallery in WordPress website. The objective is to display YouTube videos in WordPress sites as a gallery with a player and thumbnails, so that visitors can view the videos hosted on YouTube without having to leave the website. The videos can be from a YouTube Channel or all videos uploaded by a user (self). This example uses the WordPress plugin - YouTube Channel Gallery plugin.
Steps:
1. Install and activate the WordPress YouTube Channel Gallery plugin.
YouTube Channel Gallery is one such plugin for this purpose that has the features to display YouTube videos by User or by Playlist. It will also display a player.
After activating the plugin, there will be a widget to display under Appearance » Widgets. On the Widgets screen, drag and drop YouTube Channel Gallery widget to any region you desire.
2. Configuring the WordPress YouTube Channel Gallery plugin.
After installing the WordPress YouTube Channel Gallery plugin as described above, drag the WordPress YouTube Channel Gallery plugin widget from "Appearance > Widgets" to any of the WordPress region, then a configuration page will appear.
To configure the Plugin, we need certain details from Google API - API Key and user id or Playlist ID. Follow the steps below to configure the WordPress YouTube Channel Gallery plugin.
- Go to Google API
- Click on YouTube Data API
"The YouTube Data API v3 is an API that provides access to YouTube data, such as videos, playlists, and channels."
- You will be prompted to "Create a Project" first before "Enabling" YouTube Data API.
- Create a project and name it.
- Click Enable to enable the YouTube Data API
- After enabling, you will be asked to create credentials.
"This API is enabled, but you can't use it in your project until you create credentials.
Click "Go to Credentials" to do this now (strongly recommended)."
- Click on the "Go to Credentials" and create credentials.
- Select Browser Key
3. YouTube Channel Gallery plugin configuration - Video Feed Type
After the API Key is displayed, copy the key and paste it in the YouTube Channel Gallery plugin configuration page.
Set the video feed type in the YouTube Channel Gallery plugin configuration page:
This defines the YouTube videos we'd like to display- Uploaded by User, User's Favorites, User's Likes,or Playlist.
3.1 ) To Display Uploaded Videos by User/User's Favorite/User's Likes
You can display YouTube videos by User ID or Channel ID.
3.2) To Display YouTube Videos by Playlist:
Find the playlist ID from YouTube and paste it in the YouTube Channel Gallery plugin's "YouTube playlist ID".
Example:
If the YouTube Playlist address displayed in the browser look like this,
https://www.youtube.com/playlist?list=PL7Ygff8DKYatFdsHkrMIoDrxWArbMuhzw , then the You Tube Playlist ID = PL7Ygff8DKYatFdsHkrMIoDrxWArbMuhzw.
Configure other settings like the player settings, thumbnails settings and link, and save it to display YouTube Videos on Word Press website.
After the configuration is done, save the changes to display the widget by the " YouTube Channel Gallery plugin" on the WordPress site.
Set the video feed type in the YouTube Channel Gallery plugin configuration page:
This defines the YouTube videos we'd like to display- Uploaded by User, User's Favorites, User's Likes,or Playlist.
3.1 ) To Display Uploaded Videos by User/User's Favorite/User's Likes
You can display YouTube videos by User ID or Channel ID.
- In the YouTube Channel Gallery plugin, paste the YouTube User ID or the Channel ID.
- To find the channel ID, visit YouTube and click on "My Channel", and copy the last string after "channel/" displayed in the browser.
3.2) To Display YouTube Videos by Playlist:
Find the playlist ID from YouTube and paste it in the YouTube Channel Gallery plugin's "YouTube playlist ID".
- To find the YouTube playlist ID, visit YouTube > My Channel > Playlists > Click on a playlist you want to display, and copy the last string after"=".
Example:
If the YouTube Playlist address displayed in the browser look like this,
https://www.youtube.com/playlist?list=PL7Ygff8DKYatFdsHkrMIoDrxWArbMuhzw , then the You Tube Playlist ID = PL7Ygff8DKYatFdsHkrMIoDrxWArbMuhzw.
Configure other settings like the player settings, thumbnails settings and link, and save it to display YouTube Videos on Word Press website.
After the configuration is done, save the changes to display the widget by the " YouTube Channel Gallery plugin" on the WordPress site.
No comments