EverWeb Widgets

ThemeKit Video Banner

ThemeKit Video BannerInfo
Pause

Video Banner

The video shows a poster image on page load and is full width, fixed height and fills the height of a mobile phone screen. The overlay can animate in and has controls color and opacity.
The two column, three row overlay has options for a heading in row 1, an overlay image in row 2, and a link in row 3.
Video
The MP4 video file and the poster image must have the same aspect ratio. The video has controls for autoplay. loop and plays inline on iPhones. When autoplay is selected, the sound track is automatically muted and the play/pause button is hidden.
Play/Pause
The optional Play/Pause button has fields to enter different text and can be positioned top or bottom and left or right with controls for fine tuning the position on the X and the Y axis.
Heading
The optional heading sits in the top row. It has controls for font size, font size on phones, color and text align.
Image
The optional image in the overlay has an alt text attribute and has controls for setting its maximum width and position left, center or right on screen widths above the break point. Below the break point it is centered.
Link
The optional link can be configured to open internal or external pages and has a new window function. The controls for color, hover color and background color are applied to the link and the play/pause button.
Animation
The animation is a simple fade in of the overlay and its contents and there are controls for animation time and delay set in seconds.
Position
The position of the item can be relative so that it scrolls with the rest of the page content or it can be fixed in position so that the content below scrolls over it.

Auto Video Banner

ThemeKit Auto Video BannerInfo

Auto Video Banner

The auto version of the video banner has a similar setup except that autoplay is the default. The widget uses a jQuery plugin to prevent the video from downloading and playing until it is scrolled into view and to pause it when it is scrolled out of the viewport. This will speed up the page download time and save battery drain on mobile devices.