Video Header & Tab Navigation
The video header is used for the first widget on the page. Instead of combining it with one of the responsive nav widgets, the nav icon is turned off and the Responsive Tab Nav is used for the navigation menu.
Header
The header panel has an optional logo, an h1 heading, an optional h2 heading and one or two optional CTA style internal links.
The video player shows a poster image on page load and the MP4 video file is prevented from downloading until the visitor hits the play button to speed up page download time.
The MP4 video file and the poster image should be as small as possible to give reasonable quality at the maximum displayed size. The poster image must have the same aspect ratio as the video file.
The player uses a modifued version of VideoJS, It has controls for initial volume, plays inline and muted.
Plays inline is used to prevent the video from opening in full screen mode on iPhones which gives a better user experience.
Although there are options for autoplay and loop, these should be avoided. Autoplay in Safari for desktop now requires that the soundtrack is silenced. There is a muted control for this purpose.
Tab Navigation
The tab navigation allows more experienced users to to create a menu with any amount of links using the EverWeb widget API assets list. This requires the use of relative file paths for internal links and an understanding of how to create correct page file names. Follow the Info link below to find out more about file paths.
Adding Tabs
The links are created using the EverWeb widget API Assets List so it can have up to 48 items and these can be dragged around to reorder them if necessary.
In this application, the EverWeb Widget API Assets List is modified to create a list of links rather than a bunch of images. For those who are not yet familiar with this, here's how it's done …
- Click the "Add" button and an entry will appear with "Double click to edit"
- Once the data has been entered, single click the item in the list and it will become editable
- Enter a suitable name for the link
- Repeat as necessary
- Reorder items by dragging them up or down the list
Navigation Styles
The tabs are displayed inline when viewed on computers, laptops and tablets and will return to two or more lines if there are enough of them. On mobile phones in landscape and portrait mode the display is switched to block and the tabs stack themselves vertically. The tabs have controls for spacing them horizontally and vertically. The height is adjusted using the value for top/bottom padding and is the sum of the font size + 2 x the padding.
User inputs for touch devices like the iPad and iPhone must have a minimum height of 32px. The widget has a control for setting a different height on smart phones since this needs to be greater to allow easy fingertip stabbing when the tabs are stacked.
Email & Phone Links
Links for Email and Phone can be added at the end of the navigation. The email link has boxes for entering the tab label, email address and subject.
The phone link is dual purpose. On computers and tablets it shows the phone number. On mobile phones it switches to an actual "Phone" button.
The widget incorporates a meta tag to prevent the phone number from being converted to a browser default hyperlink on iPads.