Vewport Height Video
Scale in video with fade in overlay and soft bounce text block with heading, paragraph and CTA style link.
In this example, the video is set to manual play and the play/pause button is displayed.
Play Video
Hero Video
The video height is set in viewport units using a slider. At maximum height it will fill the height of the browser/device windwo no matter what height it is.
In manual play mode, the poster image is loaded on page load and a play/pause buttom appears. The button can be styled and placed in any position relative to the top or bottom and the left or right.
When autoplay is selected, the play/pause button is hidden. If the video has a soundtrack, it MUST be muted for autoplay to work in all browsers.
Overlay
The full size overlay has controls for color and opacity. It has a heading and text and an optional link centered horizontally and vertically.
Scroll Down Chevron
The scroll down function should be turned on when the video is set to 100vh in height. When clicked or tapped, it will scroll the page down by 100vh - the height of the browser or device window. The button colors can be changed and the scroll down time adjusted.
Video & Poster Image
The video file and poster image should be as small as possible. The poster image in this demo is 800 × 450px with a file size of 150KB. The video file has the same dimensions and its file size is 1.4MB.
The video file type must be MP4, encoding H.264, fast start for internet streaming to get the best reaults.
Fixed position
If a video background is required it is much more efficient to use a viewport height video fixed in position for scroll over than a background video. The widget has a checkbox to fix it in position and adds the relevant code to make it all work.
Animation
There are three animations available. Each one has a checkbox to turn it on and controls for animtion time and delay expressed in seconds.
The overlay can fade in, the text can drop down with a soft bounce and the poster image can scale up from the center.
The scale up can have rotation added for even more effect. The higher the value for rotation angle - the faster the spin. Note that values greater then 360° can be used. Try a value of 720 to really get your spin on. There is a checkbox to reverse the spin direction if required.