and like us on FB

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:

Bride Killed in Helicopter Crash (Warning: Distressing Footage)

Bride Killed in Helicopter Crash (Warning: Distressing - View

New Asiana 214 Video (SFO) - Airport Camera Video C225

New Asiana 214 Video (SFO) - Airport - View

China Eastern Flight MU736 Engine Failure (SYD) -

China Eastern Flight MU736 Engine Failure (SYD) - View

American Airlines Flight Attendant Altercation With Passenger, Friday 21st April 2017

American Airlines Flight Attendant Altercation With Passenger, - View

United Airlines Passenger Forcibly Removed on Overbooked Flight

United Airlines Passenger Forcibly Removed on Overbooked - View

Harrison Ford's (Full) FAA Tower Recordings, February 13, 2017

Harrison Ford's (Full) FAA Tower Recordings, February - View

Air Canada Boeing 787 Dreamliner Engine Failure, 25th March, 2017

Air Canada Boeing 787 Dreamliner Engine Failure, - View

Cyclone Debbie from the International Space Station (ISS). Mar 26th 2017, 06:28Z (4.28PM AEST)

Cyclone Debbie from the International Space Station - View

The Easter Air Lines Losers (1967)

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 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.

Setting up a Twitter Application

Setting up a Twitter Application - View

Add The Facebook SDK To WordPress

Add The Facebook SDK To WordPress - View

Simple WHOIS Lookup With PHP (Free Website)

Simple WHOIS Lookup With PHP (Free Website) - View

Determine A Person's Age From DOB (With PHP Or WordPress Shortcode)

Determine A Person's Age From DOB (With PHP Or WordPress - View

Shortcode Attributes

apikey

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

channel

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

title

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

title_color

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.

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.

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.

Download

Title: YouTube Responsive Gallery or Tower in WordPress
Description: Create a Responsive Gallery (or Tower) of YouTube Thumbnails in WordPress (Using YouTube's V3 API).
Download: Shortcode (V0.2) | | Plugin Page

Shortt URL for this post: http://shor.tt/14nL