Unlike the standard embed code that YouTube already provides, the uTube stack lets you leverage some additional functionality that's not normally available. Some of the features in uTube include starting and stopping video at particular points, autoplay, looping, lazy-loading, reduced branding, enhanced privacy and much more. Various different video formats are supported; including 4:3 legacy, 16:9 widescreen and YouTube Shorts.
You have the option to embed uTube stacks directly within a theme FreeStyle banner container or theme ExtraContent containers. This reduces the total number of stacks required on the page and simplifies the configuration process. uTube is compatible with Stacks 4 and later.
You have the option to embed uTube stacks directly within a theme FreeStyle banner container or theme ExtraContent containers. This reduces the total number of stacks required on the page and simplifies the configuration process. uTube is compatible with Stacks 4 and later.
Example
Here is an example of a YouTube video embedded in a page using the uTube stack. The default settings are used for this example.Because the video is loaded from YouTube, opt-in consent using a stack like MiniCookie is mandatory, for compliance with privacy laws. Ideally the video should only ever get loaded and shown if the website user grants their prior consent to seeing YouTube (and other third-party content). This satisfies stringent privacy laws like GDPR, DSVGO and CCPA.
Setup
Follow these instructions for getting a uTube stack setup in your project:- Once installed into Stacks and RapidWeaver in the normal way, add a stacks page to your project and open the stack library. Drag and drop a copy of the uTube Stack into your page.
- The placement of the stack can be changed between the normal page flow, a theme ExtraContent container or a FreeStyle banner, in the stack settings.
- Type in the video ID. This is normally a random string of letters and numbers. Be sure to enter this carefully, taking care not to introduce any spaces or other special characters. If the URL of the video is something like this:
http://www.youtube.com/watch?v=t4DXCx7qdEQ, then you would just type in the the ID code afterv=in the URL. In this example, the video ID would bet4DXCx7qdEQ. Any other parameters after the ID which begin with a question mark (?) or an ampersand (&) character should be ignored. - Enable or disable any of the other video settings. For example, you can check the setting to have the video autoplay, toggle the display of video controls or set custom starting and ending points.
- Preview your page in RapidWeaver to see how the video looks and works. Save changes and publish your website in the normal way, when done.
Important!
If you see a warning in RapidWeaver preview that your video can't be played, carefully check the video ID again. Also please note that video you are wanting to embed on your website must be marked as public and permitted to be embedded inside websites. As an example, a lot of music videos are blocked by record labels from being used inside websites, due to copyright. So before you complain the stack does not work, please firstly verify use of the video is actually allowed.
If you see a warning in RapidWeaver preview that your video can't be played, carefully check the video ID again. Also please note that video you are wanting to embed on your website must be marked as public and permitted to be embedded inside websites. As an example, a lot of music videos are blocked by record labels from being used inside websites, due to copyright. So before you complain the stack does not work, please firstly verify use of the video is actually allowed.
Looping video
YouTube has a slightly obscure way of looping video. Essentially the 'hack' to get it working is to use a playlist, which YouTube seems to prefer cycling through in succession. To have a video loop, you firstly need to enable the Loop option, in the uTube settings. Then scroll down and enable the Playlist option. In the Video IDs box, delete the existing entries and enter your video ID. The video ID you enter needs to be identical to the Video ID you provide at the start of the stack setup. The video ID only requires adding once in the playlist box.Custom playlists
As of version 4.1.0, you can now create a custom playlist of multiple video's that automatically play in succession of each other. This operates independently to any playlists you may have already created in YouTube. Playlists in the uTube stack work by providing a comma-separated list (with no spaces) of video IDs like this:uCVv0TMTGLo,jtgdMsV9bEs,2va7MM7nN8A,gt9cfLfW2jsIn this example, 4 video's will play in succession. When the playlist is enabled, a playlist button is displayed at the top left of the video player and users also have the option in the controls to skip backwards and forwards between video clips. This method of creating a YouTube video playlist is recommended over using the defunct uTubeChannel stack.
Please note
YouTube is a registered trademark of Google LLC. The uTube stack is in no way endorsed or supported by YouTube. My role is simply to provide the uTube stack as an easier and more flexible method towards getting YouTube content embedded inside a website. Your use of YouTube content in your websites is subject to acceptance of their outlined terms.If you have arrived at this page with a complaint about content you have seen a website owner using my uTube stack with, please report it to YouTube and / or the hosting company. Although I have coded the stack and my name is shown in the page source code, I am in no way responsible for the content a website owner decides to embed using it.
