Video Stack
Slick, minimal video presentation.
Description
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. Plus 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.
Demo
Self hosted video.
Vimeo video.
YouTube video.
User Settings
A comprehensive overview of this stacks user settings.
Video
Type : PopUp Select
Select where the video is located.Vimeo, YouTube, or Self Hosted.
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
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.
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.
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
Type : Number Input (px)
You can restrict the maximum width in pixels that your videos thumbnail image can ever become.
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.
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.
Type: Number Slider (px)
Rounds the corners of the thumbnail image by the chosen amount.
Type: PopUp Select
Choose between small, medium, and large sizes for the play button that appears on the thumbnail image.
Type: 4 Colour Pickers
You can redefine the colors of the play button for both normal and hover state.
Last modified %(last_mod)%