Cinema

Thunder Pack addon stack

Create cinematic video backgrounds for your content, or use them as a page banner. The Cinema stack loops your video in the background to create a beautiful ambiance.

  • Uses RapidWeaver Resources section to store videos.
  • Set Cinema's height differently at each breakpoint -- including flexible heights.
  • Add an overlay color on top of your video background.
  • Include a "poster" image to be shown while video loads.

Example

Cinema

Create stunning, cinematic video backgrounds for your content, or use them as a beautiful page banner. This is a more advanced level stack, as you'll need to encode your videos separately from the stack itself. We walk you through how to do this in our tutorial videos.

Sample Videos

Royalty Free
To help get you started we've already created some nice loop able animations and encoded them to the correct formats, as well as made a Poster image for each. This will give you some videos to experiment with before diving in and encoding your own.

Using Cinema

General

Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the stack.

Inner Container
You can choose between a fixed-width for the inner portion of the stack or make it fluid. Fluid allows the contents of the stack to stretch out to the full-width, while fixed-width option allows you to set your own maximum width for the inner content.

Inner Max-Width
Set the maximum width you desire for your content in the stack when using Fixed-Width as your inner container type.

Remove Left & Right Padding
When using the Fluid option of the Inner Container setting you are given the option of whether to remove the outer padding on the left- and right-hand sides of the Banner’s content container.

Video Files

Poster Image
The Poster Image shows in the stack’s background while the video file loads. This way if you have a large video file the visitor will be presented with a still background until the background video has completed its loading process.

MP4 & WEBM Files
These are your video files for the background video within Cinema. You will need to include both the MP4 and WEBM format.

These files can be dragged and dropped into the RapidWeaver Resources and accessed through there to keep your site contents organized. We cover how to both encode your videos as well as how to use them within the stack in our tutorial video.

Overlay

Overlay Background
Choose a color, as well as adjust the opacity of that color, that will be laid on top of your video background.

Cinema Height

Mobile, Table & Desktop Height
Allows you to adjust the height of the Cinema stack at each breakpoint. By default all three breakpoints are set to flexible, adjusting its height based upon the stack’s contents.

Insight
Coverting Videos

Be sure to watch our Cinema Tutorial video above to learn how you'll need to convert your videos for use with the Cinema stack. This one's important, so if you plan on using the Cinema stack, please don't skip it.