Pause Video
Autoplay Video
The viewport height background video will autoplay on page load. To allow this to happen, autoplay and muted are implemented by default. If a video is not muted, it won't autoplay in Safari for desktop and iOS.
There is a play/pause button which can be edited to change the style and the text content.
Since the widget will be used as a header, it has a built in mobile nav buton and should be used in conjunction with either the VPH Nav 1 or Nav 2 widget.
It has options for a logo and a smooth scroll down tab and a centered content area with options for heading, text and link and a fade in animation option.
Scroll down to see the viewport height MP4 VideoJS Widget …
MP4 VideoJS
The player loads a fully width, responsive viewport height poster image and the video file is prevented from downloading until the vistor clicks or taps the center play buttom.
The player uses the VideoJS script to have a control bar which displays the same in all browsers. There are controls for initial volume and the play button color and hover color.
The optional smooth scroll down chevron has controls to adjust the icon color, hover color and the background color. There is a control to show a title on hover and a text field for entering the title text.
Since this is the last item on the page, it just scrolls to reveal the footer with its smooth scroll to the top icon.