Video Hero

The ThemeKit Video Hero widget autoplays the video file on browser/device screen widths above the breakpoint. Below the selected breakpoint the video is removed and replaced by an image. since autoplay should never be used on small mobile devices.
The hero has a fixed height above the nreakpoint and a responsive height below it.
The video file is lazy loaded, has a loop function and has the option to add a poster image when loop is not selected.

Options

The hero can show just the video/image but has options for …

  • A full width header with heading
  • Optional logo/internal link with width control
  • Optional links at the bottom
  • Links internal or external with max width control

Performance

Both the video file and the image loaded for mobile devices are lazy loading to provide the best possible download performance.

Video Menu

A video website needs a navigation menu with images to represent the video content. Adding a caption and description will help a lot with search engine indexing.
The ThemeKit Video Menu appears as an animated icon with text and fixed the top right or left so that it's always in view.

Options

The menu has …

  • Animated action tab positioned left or right
  • Items arranged in a responsive grid
  • Grid is centered in an overlay with adjustable background color and opacity
  • Images should be representative of the video content
  • Items have an animated link icon at top right
  • Images have alt text and are lazy loading
  • Fields for caption, optional span for price/date and for a description.
  • Controls for border width, color and radius
  • Adjustable grid item spacing

Editing

The navigation can be viewed on the EverWeb design canvas for editing using the control for editing height. A checkbox hides it before publishing.
It can be inserted as the lat item on the page and below the footer widget/footer bar widget if present..

Menu