Stacks Image 2662

Video Stack

One stack, with multiple video options.

Instant Download
Requires Rapidweaver & Stacks Plugin v3.5 +
Stacks Image 1635

Overview

Video presentation stack, compatible with YouTube, Vimeo, or Self hosted videos.

A slick, minimal, modern approach to video presentation. We wrote this stack from the ground up (no 3rd party plugins), so its extremely lightweight and robust. The goal was to produce a minimal design style, that allows the content to shine.Custom controls have been carefully curated to allow the stack to blend into your own websites theme. As well as slick layout options, just enough to control the stack while not overwhelming with an array of control you will never use, resulting in extremely fast deployment of the stack in your pages.

Stacks Image 2547
Modern
A slick modern design mantra was at the forefront of this stacks design. That said, we have provided just enough custom controls for you to customise the appearance to best fit your taste.
Stacks Image 2494
Automatic
Everything that could be automatic in this stack is. The video will auto play when opened in the light box, and if viewed on a mobile device, it will automatically switch to full screen when your visitor clicks play, for the best viewing experience.
Stacks Image 2531
Robust
Having written this stack from the ground up, we are intimate with every line of code. It's extremely lightweight, and will stand the test of time as web standards evolve.

Demo

Live demos of the stack in action.

These demos are set the the stacks custom control defaults. Please see the custom controls section below for more info on the customisations available to this stack.

Self Host
Stacks Image 2665
Stacks Image 2632
Vimeo
Stacks Image 2639
YouTube
Stacks Image 2645
Eternal Animation
Stacks Image 2612

Custom Controls

A comprehensive explanation of each of the stacks custom settings.

Stacks Image 2381
Video
Provider

Type : PopUp Select
Select where the video is located.
Vimeo, YouTube, or Self Hosted.

Video ID

Type: Text Input
Only relevant for YouTube and Vimeo Videos.
Enter the video's id number here. You can find the id number in URL of the page the video is located on.

For Vimeo: A typical url looks like this, and we have highlighted the video id number
https://vimeo.com/166807261

For YouTube: A typical url looks like this, and we have highlighted the video id number
https://www.youtube.com/watch?v=F3cYQabAVzI

MP4 Video File

Type: Link Control
Only relevant to Self Hosted video.
Set a link to the self hosted video file. This file should be located on the same server as the webpage, to avoid cross domain issues, and should be in the MP4 file format.

Video Aspect

Type: PopUp Select
Chose between 5 different aspect ratios. This setting is not imperative, but choosing the correct aspect ratio can enhance the viewing experience, by obtaining the maximum size the video may be when playing back. If you are unsure, leave at the default 16:9 aspect ratio, the current industry standard.

Light Box (Colors)

Type: Color Picker 2
Pick colours here for the video light box overlay, and the "X" that appears in the corner of the light box. These pickers also allow you to set the transparency of the chosen colours.


Thumbnail / Poster Image
Max Width

Type : Number Input (px)
You can restrict the maximum width in pixels that your videos thumbnail image can ever become.

Alignment

Type: Three Button Select
There is one row of alignment button for each device size, desktop, tablet, and mobile. Select how the poster image should align on each of these screen sizes.

Breakpoints

Type: Two Number Input
Normally leave these default settings alone. But you may redefine the screen width that constitutes tablet and mobile devices. It is at these screen sizes that responsive settings such as the alignment control above kick into action.

Round Corners

Type: Number Slider (px)
Rounds the corners of the thumbnail image by the chosen amount.

Play Button (Size)

Type: PopUp Select
Choose between small, medium, and large sizes for the play button that appears on the thumbnail image.

Play Button (Colors)

Type: 4 Colour Pickers
You can redefine the colors of the play button for both normal and hover state.

More FAQ

Other Important information relevant to this stack.

Stacks Image 2385
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.

Known compatibility issues

There are no known compatibility issue at this time.

Browser Support
Tested in all major browsers, on desktop and mobile devices, without issue.

Explorer

Safari

Chrome

Firefox

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