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
apikey
.channel
" link; your channel ID is everything after channel and before videos.title
title="1" (default). To remove, use title="0".title_color
title_color is the color of your title text.title_background & title_view_background
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
title_size is the size of the title text. The title_trim determines how many words are returned.columns & width
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
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.
Considerations
- 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.
- Find a number of other YouTube articles by way of our YouTube
tag.
