Example

You may be able to see the video playing in the background of this page, behind the content.

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.

Autoplay

uTubeFill depends on autoplay being available, for the video to play. This stack has no buttons for a user to start or stop video playback manually. In instances where the web browser does not support autoplay, the static video thumbnail is displayed instead.

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.
 

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.