RBA Cash Rate: 4.35% · 1AUD = 0.67 USD · Inflation: 4.1%  
Leading Digital Marketing Experts | 1300 235 433 | Aggregation Enquires Welcome | Book Appointment
Example Interest Rates: Home Loan Variable: 5.20% (5.24%*) • Home Loan Fixed: 5.48% (6.24%*) • Fixed: 5.48% (6.24%*) • Variable: 5.20% (5.24%*) • Investment IO: 5.78% (6.81%*) • Investment PI: 5.49% (6.32%*)

Create a Responsive Gallery (or Tower) of YouTube Thumbnails in WordPress (Using YouTube’s V3 API)

Create a Responsive Gallery (or Tower) of YouTube Thumbnails in WordPress (Using YouTube’s V3 API)

Following on from our last article dealing with creating a YouTube tower with the YouTube RSS feed and WordPress shortcode, this article seeks to provide guidance when building your own tower or thumbnail gallery via use of YouTube's (version 3) API. Given the numerous options that might apply, we've provided a fairly generic example with enough options that'll make it usable if you weren't prepared to modify it.

See also: "Thumbnail Image (Links) from a YouTube RSS Feed in WordPress" [ Visit ]

The Result

In the first example we'll render nine videos with titles in three rows. The result is as follows:

Shortcode used was [youtube_gallery columns="3" number="9"]. The number of shortcode attributes adds complexity to the whole exercise... and the inline styles don't make life as easy as we'd like. You can add a background color by removing the span element from the title and uncommenting the background color with opacity (behind the text) in div.description selector.

To create a tower of YouTube thumbnail as per the previous article, the following shortcode may be used: [youtube_gallery columns="1" number="4" title_trim="10" channel="UC3qxAmFHsyqAnrg_UbbsHjQ"]. Since it's a single column, the tower will inherit the width as defined in our attributes.

Shortcode Attributes


You are required to register an API key via Google Console .


Your YouTube channel is not your vanity username. Click on your "Videos " link; your channel ID is everything after channel and before videos.


To include a YouTube video title, use title="1" (default). To remove, use title="0".


The title_color is the color of your title text.

title_background & title_view_background

The title_background is the color of the span behind the title text. You have the option of adding a background color with an opacity applied. If this were the case, remove the span reference and uncomment the three lines in the div.description class. The title_view_background is the color of the background behind the 'view' text.

title_size & title_trim

The title_size is the size of the title text. The title_trim determines how many words are returned.

columns & width

The number of columns to return. If a single column is returned, the container is centered with a width of width (defaults to 300px). By default we'll use the thumbnail with a width of 320px. If you require a larger thumbnail you'll have to alter the code as necessary.

description & description_trim

To include a description, use description="1". The description_trim attribute truncates the string as necessary.

There are a number of additional attributes that relate to viewport widths, basic styling, and padding.


  • The function requires Simple Cache. Caching to a text file is faster and more reliable (by virtue of the old data fallback) than WP's transient API.
  • The inline styling and number of attributes makes this a difficult shortcode to use. Consider moving the relevant snippets by way of a custom functions file.
  • The best use of this function is to display just the tower. If you want something specific, please let us know. The default gallery format is a little messy (and was provided only as an example).
  • While we've rendered YouTube thumbnails, you could just as easily display the actual YouTube video.
  • Alter the API request to return videos based on search keywords and playlists etc.
  • YouTube results are paginated. Multiple pages may be returned by simply iterating over each page response.
Create a Responsive Gallery (or Tower) of YouTube Thumbnails in WordPress (Using YouTube’s V3 API)
  • Find a number of other YouTube articles by way of our YouTube Tag: youtube tag.


Title: YouTube Responsive Gallery or Tower in WordPress (Shortcode)
Description: Create a Responsive Gallery (or Tower) of YouTube Thumbnails in WordPress (Using YouTube's V3 API).
  Download • Version 0.2, 2.1K, zip, Category: WordPress Shortcodes

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.

  E. Australia Standard Time [ UTC+10, Default ] [ CHECK TO CHANGE ]

  Want to have a chat?


Like this article?

Share on Facebook
Share on Twitter
Share on Linkdin
Share on Pinterest

Leave a comment