Quality stacks to empower your creativity
uTubeChannel is relatively easy to get setup in RapidWeaver; you just enter your API key and channel name in the stack settings. Your latest YouTube® video will be embedded automatically within the webpage, together with its 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 your video links 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 or watch on YouTube®.
This stack is styled in a Bootstrap-ish style, making it ideally suited for use in ThemeFlood RapidWeaver themes. Body text and heading styles will be inherited from your chosen theme. Many of the text strings can be localised and Font Awesome icons can also be shown against the 'next' and 'previous' playlist pagination buttons. UTubeChannel stack can be safely used on secure websites that have an SSL certificate applied, as this page demonstrates.
uTubeChannel will purposefully disregard individual playlists you may have already setup to sort your video's into. This stack is simply about connecting to your YouTube® account and getting your latest video content into the webpage. Any video which has been marked as 'public' and supports embedding will be used. If a video gets deleted from your YouTube® account, it is automatically removed from uTubeChannel.
This stack is styled in a Bootstrap-ish style, making it ideally suited for use in ThemeFlood RapidWeaver themes. Body text and heading styles will be inherited from your chosen theme. Many of the text strings can be localised and Font Awesome icons can also be shown against the 'next' and 'previous' playlist pagination buttons. UTubeChannel stack can be safely used on secure websites that have an SSL certificate applied, as this page demonstrates.
uTubeChannel will purposefully disregard individual playlists you may have already setup to sort your video's into. This stack is simply about connecting to your YouTube® account and getting your latest video content into the webpage. Any video which has been marked as 'public' and supports embedding will be used. If a video gets deleted from your YouTube® account, it is automatically removed from uTubeChannel.
Example
This is a real working example of the uTubeChannel stack. In this instance we used an AdaptiveGrid stack to position the player and playlist. On smaller screens the two columns merge into one:Setup
To get uTubeChannel setup and working in your RapidWeaver project, carefully follow these setup instructions:- Once installed, drag and drop a single uTubeChannel stack into your page.
- In the stack settings enter your YouTube® API key and channel name. Both of these are described in detail below.
- At the point where you want your playlist shown, enter
<div class="uTubeChannelPlaylist"></div> - Configure any other optional style or text settings shown in the stack
- Preview your page and publish it when you've confirmed everything is working to your liking
Channel name
This is your public name, as shown on YouTube®. The easiest way to get the channel name is go to your YouTube® account, click 'My Profile' and click on your icon or logo. The website address will revert to something like https://www.youtube.com/user/willwoodgate and your YouTube® channel name is shown immediately after /user/ in the address. Enter just the channel name in the stack settings, not the full URL.Creating an API key for YouTube®
The 'key' is a random string of letters and numbers issued by Google. Your own API key must be obtained before using this stack. Do not use the API key provided already for anything beyond basic testing of the stack in RapidWeaver. API keys play several important roles, including improving the security of your website, the speed at which content is loaded and provide a method to monitor activity. Keys are free to obtain for basic usage and for use in low to medium traffic websites or apps. Keys can be obtained or renewed in the following way:1) Go to https://console.developers.google.com Login if prompted (you will need a Google account). Click the blue Create Project button.
2) Give the project a new name, e.g. 'Website Video Player'. Read and agree to the terms and conditions and click Create. Be patent - it may take a couple of minutes for the new project to be added. The page will automatically refresh and show the Project Dashboard for your newly named project.
3) In the lefthand sidebar, toggle open the APIs & auth group of settings and click on the APIs option.
4) Click on both the YouTube Data API and YouTube Analytics API options. Enable both of these APIs using the blue buttons shown. Data is responsible for fetching the actual video content from YouTube and Analytics feeds information back; relating to play counts and the duration which people have watched video content for.
5) Now click the Credentials option in the console sidebar. You will be shown options to create an OAuth or Public API key. You will need to create a new Public API access key, so click that corresponding button. When prompted about the sort of key to create, choose the Browser Key option.
6) No further configuration of the browser key is required, although you can optionally restrict the key to only work from a certain website domain. Normally this can be ignored and you just click the blue Create button.
7) The API key and other related information is now displayed on the screen. Make a note of the API key. It is a random string of letters and numbers. Should you ever need to renew (regenerate) the key, delete it or edit its properties, you can do that from this part of the console.
8) Copy and paste this API key carefully into the uTubeList stack. Take care to only copy and paste the API key shown. Do not copy any other keys, text or information.