Viewport Height Video Stage

The item consists of a full width background image with a transparent overlay. The height is set to 100vh which means that it fills the browser or device window on page load.
Responsive
This page design is fully responsive down to the width on the smallest iPhone in portrait mode. If viewing this on a computer, reduce the browser with to see how the layout changes or use the browsers responive mode.
Images
The widget loads three different size images for displaying on the different devices. Images should be cropped to the required size before importing into EverWeb. Suitable sizes would be about 1600px wide for the large image, 1200px wide for the medium image and 800px wide for the small image.
Overlay
The overlay has the option to animate in on page load and the backgound color has an opacity slider.
The content area is centered horizontally and vertically and has an h1 heading, an MP4 video container and a text field for the video title.
Video
The video container is centered over the background image and shows a poster image on page load. The MP4 video file is played using the VideoJS player. It has an initial volume setting and can be styled with a box shadow if required.
Scroll Down
The scroll down function is optional. Clicking or tapping the chevron down icon smooths scrolls the page down to the next item. The smooth scroll script and the anchor are built into the widget.
The scroll down tab can be adjusted for icon color and the background color and its opacity.
Animation
There are four animated items - the heading, the video title, the player and the background overlay. The first three have controls for setting the animation type - fadeIn, inDown, InRight, InUp and InLeft - and the animation duration and delay.
The overlay fades in with controls for duration and delay. In this example, the overlay fades in last to give the effect of darkening the stage before the video is played.
Navigation
The navigation is a separate item which is placed below the header on the EverWeb design canvas.
When viewed on computers, the navigation can be absolutely positioned at the top and center of the header and the links display inline.
On touch devices like the iPad and iPhone, the navigation disappears to be replaced by a "hamburger" icon at the top right. Tapping this will open the mobile version of the navigation menu.
The navigation can be styled with a web safe font or a Google hosted or non web safe font with a web safe fallback. There are controls for setting the font size, color, hover color and the background color and its opacity.
There is an option to display the current page in a different color and this can have an animated underline if required.
The inline navigation has adjustable spacing and the mobile version can have horizontal separators with conrols for width and color.
The mobile navigation icon can be styled for icon color, background color and opacity. The drop down has a control to set its width.
Responsive Design Testing
Responsive layouts like this one need to be tested on the various devices before uploading to the server. There's little point in even considering a responsive design without the proper tools.
Download and install Apple's Xcode which is a free appp for developers.
Once installed, create an alias to the iOS Simulator and use it to test designs on the various iPad and iPhone models.