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 ]
In the first example we'll render nine videos with titles in three rows. The result is as follows:
Bride Killed in Helicopter Crash (Warning: Distressing - View
New Asiana 214 Video (SFO) - Airport - View
China Eastern Flight MU736 Engine Failure (SYD) - View
American Airlines Flight Attendant Altercation With Passenger, - View
United Airlines Passenger Forcibly Removed on Overbooked - View
Harrison Ford's (Full) FAA Tower Recordings, February - View
Air Canada Boeing 787 Dreamliner Engine Failure, - View
Cyclone Debbie from the International Space Station - View
The Easter Air Lines Losers (1967) - View
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
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.
title="1"(default). To remove, use
title_coloris the color of your title text.
title_background & title_view_background
title_backgroundis 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
title_view_backgroundis the color of the background behind the 'view' text.
title_size & title_trim
title_sizeis the size of the title text. The
title_trimdetermines 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_trimattribute 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.
- Find a number of other YouTube articles by way of our YouTube tag.