HoverVid would be perfect to use with something like TopBox. You could place HoverVid stacks within a grid and configure each to play a little MP4 file on mouseover (without any sound). When a person clicks on the thumbnail, it opens the full video. This could prove to be a more interesting effect, compared with displaying static thumbnails images.
For best results, take a selection of video frames from the main video or increase the video speed to create a short time lapse. HoverVid loops the video automatically, so you can keep it relatively short in duration.
Is it possible to have HoverVid start playing the video on page load (known as autoplay). However you would be required to remove audio from the video and work on the assumption that some web browsers do not support autoplay.
For best results, take a selection of video frames from the main video or increase the video speed to create a short time lapse. HoverVid loops the video automatically, so you can keep it relatively short in duration.
Is it possible to have HoverVid start playing the video on page load (known as autoplay). However you would be required to remove audio from the video and work on the assumption that some web browsers do not support autoplay.
Examples
Here we have a little <1 MB video files hosted on our website. In this example, the HoverVid stack is configure to open a full YouTube video within a TopBox lightbox, when clicked.Please note that TopBox is not included with the HoverVid stack. TopBox is a separate stack to buy, if you are interested in using it. If you did not have access to TopBox, then you could still open the video in a new tab or browser window - it just won't look quite as nice!
HoverVid could be enhanced further with padding, borders, margins and backgrounds. Other stacks like Shady could be used, if you want to apply effects like shadows.
Setup
Please follow these instructions for installing and using HoverVid:- Download HoverVid using the button on this webpage. Uncompress the .zip file if your web browser does not do it for you.
- Drag and drop S4S-HoverVid.stack onto your RapidWeaver dock icon.
- Follow the onscreen instructions for installing HoverVid and restarting RapidWeaver.
- Add a new Stacks page to your website, if you need to.
- Open the Stacks Library and search for 'HoverVid'. Drag and drop a copy of the stack into your webpage.
- Keep the stack selected in Edit Mode, so you can configure the links, images and video (details below).
- Preview your webpage to test the stack. Export or publish your website when done.
Multiple HoverVid stacks can be safely used on the same webpage. Your can ALT + Click existing HoverVid stacks to duplicate them. Use a column or grid stack, if you want to create horizontal and vertical rows of HoverVid stacks.
The option is provided to display video controls. The standard web browser video controls will be shown. However this setting requires that you do not apply a link to your HoverVid stack. Links are stretched over the top of the whole video, so obviously links would introduce an invisible layer and prevent a user interacting with the video controls underneath. This may prove confusing to the end user. So its safest to keep video player controls disabled, all the time you have links applied to your HoverVid stacks.
Configuring links, images and video
HoverVid presents you with link buttons, for configuring the target link, poster image and video files.The target link is optional, and this is where you can configure what webpage or lightbox to open with HoverVid, when it is clicked. Custom link attributes are supported, meaning you can utilise powerful lightbox effects, such as TopBox.
Poster images are static JPG or PNG images displayed while the video is loading. It's often easier to just take a screenshot of the video file, and use a static frame as your poster image. We've also sometimes seen search engines using the same poster image in their search results. Add poster images as resources in RapidWeaver or link to them at a warehouse location. Work on the assumption that people browsing your website on smartphones or tablets will only ever see the poster image, and won't see the video clips playing (smartphones and tablets do not have mouse input for hover events).
The video should ideally be provided in MP4 format. Keep the video in a low frame rate and resolution, to help it load quicker. Remember that the objective when using HoverVid is not to have pristine, HD-quality, 4K video playback! The video purposefully wants to be of a low quality, so it loads faster. Use free software like Miro Converter or Handbrake to generate your MP4 files. Optionally you may wish to also provide WebM and OGV video file variants too, for wider web browser compatibility. Add these little video files as resources in RapidWeaver or link to them at a warehouse location.
