Stacks4Stacks

uTubeChannel is relatively easy to get working in RapidWeaver. You just enter your API key and channel or playlist name in the stack settings. Your latest YouTube® video's will be embedded automatically within the webpage, together with their title, play count, upload date and description. uTubeChannel is a brilliant way of guaranteeing your latest YouTube® video will always be shown; without needing to manually update or republish your website each time. The standard YouTube® video player is used, with all the normal options to play / pause, change the video quality, watch later, Chromecast or watch on the main YouTube® website.

This stack is styled in a Bootstrap-ish style, making it ideally suited for use in ThemeFlood RapidWeaver themes. Several style and colour options exist for the video playlist. All text strings can be localised, making it ideal for multilingual websites. Additionally uTubeChannel stack can be safely used on secure websites that have an SSL certificate applied, as this webpage demonstrates.

By default, uTubeChannel will display the video playlist to the right of the player container. On smaller screens, the playlist reflows and is displayed below the video player, without scroll bars. If you prefer to have the playlist below the player container at all times, simply increase the number in the breakpoint setting.

Example

This is a real working example of the uTubeChannel stack. In this instance we placed the uTubeChannel stack inside a free Shady stack:
 

Setup

To get uTubeChannel setup and working in your RapidWeaver project, carefully follow these setup instructions:

1. Once installed into Stacks and RapidWeaver, drag and drop a uTubeChannel stack into your page
2. Login to your Google account an obtain a new YouTube® API key from this weblink
3. In the stack settings enter your API key and the channel or playlist name
4. Also within the stack settings you can customise the style and colour scheme of the playlist interface
5. Preview your page and publish it when you've confirmed everything is working to your liking

The sample API key supplied with uTubeChannel is not intended for use in actual websites. The API key is regularly changed, so if you continue to use it your uTubeChannel stack will stop working without warning! Please register your own YouTube® API key from this weblink. The process is quite simple and numerous tutorials exist that cover the process. A benefit of registering an API key in your own name is that Google can contact you (by email) if they need to discuss any aspect of your setup or give you advanced notice that you need to generate a new API key.

Video sizing

Large black borders showing to the side of the video? This is more than likely the result of the way the video is responsively resized to fit within the given container. You can adjust the Player Height settings to ease the issue on desktop browsers. On smaller screens, the playlist is rendered below the player container. You can have the playlist permanently positioned below the player on all screen widths, by changing the Breakpoint setting to a high number like 10000px.

Getting the channel or playlist name

Both are easy to obtain from the YouTube® website. It is assumed you've gone through the full setup process to verify your account and create a user or business name. Click the images below if you need to see them in detail.

 
Your channel name (shown in the first picture) is often available in the web browser address bar, when you click 'My Channel' in the YouTube sidebar. The playlist identifier (shown in the second picture) is a random string of letters, numbers, hyphens and underscores that typically appears in the address, after the list= query string (you can see it in the address bar or when you click to share a playlist).

Either the channel name or playlist ID can be entered into the uTubeChannel settings. Only video content marked public or unlisted will be shown. Any private video content will remain hidden. You can embed channels or public playlists created by other users; if the content supports being embedded and is available in your particular region.

Please note

YouTube® and the YouTube® logo are registered trademarks. Your use of the YouTube® API and services is subject to acceptance of the terms and conditions presented on the website. Companies like YouTube® reserve the right to withdraw API access (either temporary or permanently) at any time, and without warning. Users of this stack are kindly reminded that they are solely responsible for adhering to all applicable laws. uTubeChannel is derived from the opensource and MIT licensed jQuery Youtube Channels Playlist plugin and YouTube API 3 code. The editing interface, localisations and much of the CSS code is developed by Stacks4Stacks.

 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.