Stacks Image 647

Play video in the background.

Now with optional full screen mode.

Stacks Image 868

Play Stack

Background video player. Play YouTube or self hosted in the background of any stack.

0 Likes

Instant download.
Requires: Stacks v3.5 or greater.
Version : 1.0.5
Released: 27/10/14
Last Updated : 12/08/16

Stack Info

Overview

Add YouTube or self hosted video as a background, behind any stacks content.

Play allows you to create a video background directly behind any stacks content, using either a YouTube or a self hosted video. It has a multitude of simple one click options, for controlling how that video content area is displayed.

Self hosted video : Self hosted videos may reside either in your Rapidweaver resources area, or already be present on your server. The stack gives you easy settings to link to your video files. (More info in the FAQ section below).

Full screen mode : When you arrived, the hero banner you saw at the top of this page is in fact the first Play stack demo.

Height management : No matter which one of the height modes you choose to use, Play will never, ever, let any of the content you add inside the Play stack spill to, or be clipped off, regardless of where you place it, or at what screen size the stack is currently being displayed. We wrote a clever algorithm, that constantly monitors the relationship between the content you placed inside Play, and the height of the Play stack it's self.

Settings

In this section, we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 1016
Video type

Choose either a YouTube video or a self hosted video here. Self hosted, being a video file you have, either in your Rapidweaver resources, or already uploaded to your server.

Video ID

This is the ID of the YouTube Video you can get this from the videos YouTube page url.
The portion of the url that is the video ID is after “v=“ and before any following “&” like the image below.

Stacks Image 1032
Video poster image

This image is important for two reasons.
It is displayed when the user first arrives on the page for a second or 2, while the video file loads, before the video file starts to play.

Play does not try and play your video on mobile devices as the file size is just to large. So this image is displayed instead.

Note: In YouTube mode, if you do not provide this image, then a thumbnail from the video is used instead.
In self hosted mode, this image is absolutely needed.

Play

Options for Auto play or Play only when hovered.

Mute video soundtrack

When selected, any soundtrack in the video will be muted.

Loop video eternally

When selected, the video will continually loop. As soon as it has finished playing it will instantly start again from the beginning.

Height

Options here are :

  • Fullscreen.
  • Custom.
  • 1/3 screen height.
  • 1/2 screen height.
  • 2/3 screen height.
  • Proportional aspect ratio.

Min height

Only when custom height is selected.

This is the minimum height that the stack will ever be displayed.

Arrow

Only when full screen height is selected.

  • Animated scroll down arrow.
  • Static scroll down arrow.
  • No scroll down arrow.

Proportions

Only when proportional height is selected.

  • 3:2
  • 4:3
  • 16:9
  • 21:9
  • 4:4
Now the stack will maintain this aspect ratio regardless of the screen size. In this mode the height is based on a proportion of the current width of the stack. Note this height will never get shorter than the content even if that would be the calculated correct proportional height, the content comes first.

Colours

Self explanatory colour pickers for global selecting the colours of text and links you add inside the stack as content.

Text shadow

Adds text shadow to any text you add to the stack as content.

Content width

This is the maximum width that the contents of the stack you add can ever be. It can get narrower on smaller screens but never wider than this size.

Centre all content

Centre all images, text and other elements you add to the stack as content.

Enable video overlay

Allows you to add an overlay over the video in the colour and opacity of your choice. This can greatly enhance the readability of any text content you add over the video.

Overlay

This will be the colour of the overlay when enabled.

Opacity

This will be the opacity / transparency of the overlay when enabled.

Edit Mode

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 1114

Just add any content you'd like to be displayed over the video in the centre drop zone.

Stacks Image 1116

You add the video poster image in the drop zone in the stacks settings. It's a really intuitive stack to use, and you can deploy a finished section in just a few minutes.

FAQ

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

Known compatibility issues

No known issues.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Live Demo

Check out the hero banner you saw at the top of the page when you arrived.

The hero banner is the first demo of the new height management features added to the Play stack. This demo is set to the new full screen option, and will display the exact height of the screen, what ever that screen height might be. When in full screen mode, the scroll down arrow is also optional.

Image

Quick Fact : You may add any other stack as content inside the Play stack. Anything you add as content will be displayed over the top of your video background.

Live Demo 2

Free eternal waves movie clip.

We created this looping waves movie to use here in the demo page, and have made it available for download, to get you started.

Download Movie Files
0

Buy Now

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Missing image

© 2018 Doobox Software. Building premium Software Mac & RapidWeaver™

Play Stack