Example

You can view an example of the uTubeFill stack on this webpage:

Splash Theme - YouTube video background

The default settings for the stack were used for this example. This example is using the Splash RapidWeaver theme. Splash is available to purchase from the ThemeFlood website and is an ideal 'blank' theme for building beautiful single page websites and landing pages. A free demo version of the Splash theme is available to download and test, from the ThemeFlood website. Splash will also work in other themes like Breeze and Photogenic.

Setup

Follow these instructions to get the uTubeFill stack working in your webpage.
  1. Once installed, drag and drop the uTubeFill Stack into your page.
  2. In the uTubeFill Stack settings on the right, 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=t4DXCx7qdEQYou 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 an ampersand (&) character should be ignored.
  3. The Selector setting may require changing for some RapidWeaver themes. This is the named class or ID selector used to wrap all your page content and lift it forward from the video background.
  4. Change any of the other settings available in the stack. By default, the video will start playing muted (with no sound) and will repeat itself.

Important! Sometimes when you’re testing YouTube video content offline, you must have your project running on a web server, as the Flash or HTML5 players may restrict calls between local files and the internet. Typically you may see a "missing plugin" message or similar. It is possible to test projects offline using web sharing in System Preferences or by downloading and installing MAMP. Some of the features in this stack may not work with older video content. Some web browser extensions like Incognito will block the embedded YouTube content and prevent the uTubeFill stack from working correctly.

Mobile / tablet compatibility

Android and iOS have removed support for auto-playing HTML5 media, in order to conserve bandwidth for users of these devices. Remember that video consumes a lot of bandwidth and this could prove to be extremely expensive if the video is playing without user input. We have to respect this decision Apple and Google have made. uTubeFill will instead try to detect common mobile devices. It will remove the normal video container and try to load a ‘fall back’ container instead. In ThemeFlood themes, it’s wise to use the FreeStyle container or an ExtraContent container as a your fallback. Display a static image instead or just have a plain background show on mobile devices.

Video permissions

The video you embed using uTubeFill must be marked as ‘public’ on the YouTube website and ‘allow embedding’ must be enabled in the advanced settings. Otherwise your video will not display. If you see an error message displayed about the video not being available, this indicates that you either don't have permission to use it in uTubeFill or the video might have an incorrect ID.

Print / PDF output

uTubeFill stacks will be hidden from print and PDF output. This will result in cleaner pages, when someone prints the webpage or saves it as a PDF.

Theme compatibility

uTubeFill is compatible with most (but not all) ThemeFlood themes, and ultimately it may serve no purpose whatsoever in some theme designs like Tornado or others where the theme content containers and banners span the full width of the page (because no background is visible). Free support is only provided for ThemeFlood customers or those who’ve contributed. For other RapidWeaver themes, you may need to change the Selector setting or contact the theme developer to ask what wrapper ID to be using in the uTubeFill settings. This setting is used to identify the elements in the page that need to be lifted forward from the video behind.
 

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.