Video Background


No More Boring Web Page Backgrounds


What Does It Do?

Video Background lets you quickly add videos as a background to your web pages, with your other content on top of the video.

Self-hosted, YouTube Or Vimeo

You can use a self-hosted MP4 video, a YouTube or a Vimeo video and set it as the background of a web page.

For YouTube and Vimeo pages, just enter the video's ID (taken from the video's URL) and you're set. It's recommended to choose a video without sound for the best user experience.


There is a simple demo here.

Options

Video Source: Choose between using a self-hosted MP4 file (you can drag it into your RapidWeaver project's Resources area, a YouTube or a Vimeo video.

MP4 Video Link: Click the "Set Link" button to tell the stack where to load the video from. If the video is in the Resources area, then you can just select it here.

Use BG Image: Choose between using a background image or using a solid color for the background.

(Power users) Hide Content BG: In some themes, the main content's background area itself may have an image or color. This and the next option will allow you to hide that background.

(Power users) Identifier To hide: Enter the identifier for the main content's background here. To target an ID, prepend with a "#". To target a class, prepend with a ".". For example, the Offroad theme's content background can be hidden by using: .site-content-inner


Requirements

  • Stacks 3
  • Rapidweaver 5, 6 or 7.

Note:

- Mobile devices will display the placeholder image that you specify; they do not allow videos to be played as background (possibly to save on cellular data charges).

For YouTube and Vimeo videos, this is how you can easily find your video ID.

Tips:

1) To make your content stand out more, you can use a background color for your stack:
2) If you want to quickly create a responsive landing page, you can consider using the Offroad theme if you're using RapidWeaver 7.

Stacks . Images & Videos . Social . Lightboxes . Layout . Publishing . Utilities .
Bundles . Support .