Unlike the standard embed code that YouTube already provides, the uTube stack lets you leverage some additional functionality that's not normally available in the regular code from the website. Some of the features in uTube include starting and stopping video at particular points, autoplay, looping and controlling how video is handled on mobile devices. The option for lazy-loading means you can safely use many uTube stacks on the same page, and avoid the problem of many video's loading simultaneously and crashing a users web browser! Responsive behaviour is achieved using the ever-popular FitVids.js opensource plugin.

The latest version of uTube has introduced the ability 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 both Stacks 2 and Stacks 3.

Example

Here is an example of a YouTube video embedded in a page using the uTube stack. The default settings are used:
 

Setup

Follow these instructions for getting a uTube stack setup in your project:
  1. Once installed into Stacks and RapidWeaver, add a stacks page to your project and open the stack library. Drag and drop a copy of the uTube Stack into your page
  2. 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
  3. 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 after v= in the URL. In this example, the video ID would be t4DXCx7qdEQ. Any other parameters after the ID which begin with a question mark (?) or an ampersand (&) character should be ignored
  4. If you want the video to start or stop at a specific point, adjust these settings accordingly
  5. 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 the video to loop at the end
  6. If you want to hide the video on mobile devices or replace it with a static image, adjust the Mobile Action settings accordingly
  7. Preview your page in RapidWeaver to see how the video looks and works. Publish your page when done.

Important! If you see a warning in RapidWeaver preview that your video can't be played, check the video ID very carefully. Also the video you are seeking to embed on your website MUST be marked as public and permitted to be embedded. RapidWeaver 5 is sometimes unable to display embedded YouTube video content.

Lazy-loading support

Support for YouTube video lazy-loading was added in version 3.1.0. We use a modified version of the opensource LazyYT.js plugin. Our version has support for previewing of YouTube content in RapidWeaver preview mode and a couple of extra useful customisable settings. The difficulty with standard YouTube embeds is that the video will begin to download, even if it hasn't been set to autoplay. This can result in pages containing many video's from loading very sluggishly. Lazy-loading fetches only the video preview image and nothing else. When the preview image is clicked or tapped, then the video will begin to load and play.

Lazy-loading is an optional setting in the uTube stack. It can be easily toggled on and off in the uTube stack settings. A second option is provided to display a title above the video preview, which can instruct users to click or tap the image to play the video.

Looping video

To have a video loop, you 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 YouTube API requires that all looping video's also provide a playlist. You may apply modest branding or hide the video controls after setting-up looping.

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,gt9cfLfW2js

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

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.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.