Stacks Image 647

Play

Video in the background.

Now with optional full screen mode.

Play

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

Overview.

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.

Instant download.

Version : 1.0.5

Responsive : Yes

First released : 27/10/2014

Last Updated : 12/8/2016

Stacks V 3.0 or greater.

Live demo 1.

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.

You can see demo 2 directly below, showing the stack need only ever be as tall as it's contents.

There a a multitude of built in options to set the height of the Play stack with a single click (see settings), but in essence, the stack need only ever be as tall as the content you add inside, if that's what you want. The demo below is set to the custom height option, with a minimum height of just 100px. But the stack is smart, and will never let the content spill out or be clipped, so it re-calculates, and gives provides enough vertical height for the contents, regardless of the screen size. And it recalculates this height when ever the screen is resized.

Live Demo 2

+

Free Waves Movie

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

Stacks 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 243
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 811
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.

Stacks edit mode.

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

Stacks Image 297

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

Stacks Image 825

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.

Stacks 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

How to get YouTube video ID?

When you watch a clip the Video id is in URL ( address bar ) for example this video

https://www.youtube.com/watch?v=0OI9ryx-yhM

The portion after the "=" sign, and before any "&" sign is the video ID : 0OI9ryx-yhM , it simple as that.

Stacks Image 845
Why can't I see my video playing when I preview my page inside Rapidweaver 6?

If you choose YouTube as the type of video to use, then you will not see the video playing within Rapidweaver 6 or earlier.
You will see the Backdrop image you provided instead.
Once you publish your page, the video will play normally in the live website.

Mobile fallback

Mobile devices don’t play background video well. On mobile devices the stack falls back to displaying your Fallback image you added in the settings to keep things looking great.

Known compatibility issues

There are no known compatibility issues with this stack.

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.

Secure checkout.

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.

Instant download.

Stacks Image 589

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

Play Stack