Stacks Image 6

Video Plus

Videos alone don’t always tell the whole story.

Video Plus

Video Plus offers total control over the presentation of your YouTube and Vimeo videos.

Overview.

The stack is designed to show YouTube and Vimeo videos in a completely new and aesthetically pleasing way. You have the ability to display any video with accompanying descriptive content, by means of a custom content column that slides into view along with the video when triggered by your user. Custom content is very flexible, allowing you to add all manner of stacks to this section.

All aspects of the stack are fully responsive, designed to display optimally on all devices. Images contained within the stack are automatically made fully responsive.

NEW: Option to turn off the custom content column.

Instant download.

Version : 1.0.8

Responsive : Yes

First released : 20/8/2014

Last Updated : 24/7/2016

Stacks V 3.0 or greater.

Live demo.

You can see a few live examples of the stack in action below.

You provide your own video poster images (any image) in the stack that become the clickable images seen below. They can be of any size, and behave just like any regular responsive image.

With extra content enabled.

Stacks Image 630
Stacks Image 707
You may add pretty much any stack you like to appear in this column when the video is opened. It often a great option to provide associated content that directly relates to the video your visitor is currently viewing.
ie: button stack above
Here we have just added some arbitrary content. An image up top, some text stacks and these a button just for kicks :-).
Note: If you look at the edit mode section to see the way the stack is presented in edit mode, you will see that when the stack is placed in a tight area of the page, it can be difficult to edit this columns content directly in the stack. We suggest creating your column content elsewhere in the page in a 1 column stack, then dragging it into Video Plus's column content area when your done. Drag it back out to further edit. This makes it much easier to see what you are doing properly.
thex Created with Sketch.

Perfect for adding associated video content that is pertinent to the video the user is currently viewing.

Just the video, no extra content.

Stacks Image 664
thex Created with Sketch.

Perfect if you just want to add a video anywhere in your page with a custom clickable poster image to launch the video.

The stack is perfectly happy to use either YouTube or Vimeo video embed code. See the edit mode section below, that shows exactly where you get to add your video embed codes you acquire from either the YouTube or Vimeo websites.

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
Overlay opacity

This slider governs how transparent the background will appear over the page when the video if clicked into action.

Hide right hand column

Does exactly what it says on the tin. It hides the right hand column, where you'd normally add extra info about the video.

Right column

Colour picker for the background colour of the right hand extra content column. Only available when the hide column option is not selected.

Close X

Colour picker for the colour of the close "X" that appears in the top right hand corner when the video is clicked in to action. Only available when the hide column option is not selected.

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

Create a poster image for your video and drop it up top. Then get the video embed code from the video site (see FAQ) and add that bottom left. Put any stack you like in the right hand custom content column. We recommend creating this in a 1 column stack first, then dragging it in, so you can see what you are creating as content better before dragging it into the narrow column.

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 embed code?

  • On a computer, go to the YouTube video you want to embed.
  • Under the video, click Share .
  • Click Embed.
  • From the box that appears, copy the HTML code.
  • Paste the code into the stack.

How to get Vimeo embed code?

  • Go to the video page and click the Share button that appears when you hover your mouse over the video player.
  • In the pop-up window, you'll see a field containing an embed code for the video.
  • Just copy the magic code and paste it into the stack.

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