Make a video header
Get the video header widget here:
Click on the link below to get the video header widget.
Video headers are a great way to add a layer of interest that cannot be achieved with sliding images or static images.
Video headers are usually 100% width with a fixed height. You can also use video headers the fill the entire browser on loading the page but scroll out of the way when the user scrolls further down the page. This particular method is trending at present so you may want to follow the trend with your own designs.
For this process, we will use the "Header Video" widget that forms part of this month's downloads.
Drag the "Header Video" widget onto the page canvas. It should already be 100% width, if not then with the widget selected click the 100% width button.
Make sure the "Cover Scroll" option is off if you want to have a fixed height header.
Use the transform tool or just drag the widget to the height you want to set it.
You will want to load the fallback image next. Typically a screengrab of the first frame of your video. The image is used if the video does not load, or video playback is not available on the device the user is using to look at your site.
Now its time to load the videos. Decide whether you want to use a remote file or to upload videos with the widget.
If you are going to upload the videos with the page select the "Uploaded File" option for both MP4 and WEBM then use the "Add File" tool to select the files you want to upload.
If you have already uploaded your video to a video hosting service and have URL's for the video files, use the "Remote URL" option and copy and paste the URL's into the option input.
Preview the page. You are now ready to start adding your content to the page. You can add elements on to of the video as well.
NOTE: Make sure any content you add on top of the header is high contrast so that the content is legible when the video is playing.
Using the Cover Scroll Option.
Cover Scroll allows the widget to resize the video to the browser window when the page first loads. While the viewer is at the top of the page even if they resize the browser window, the video will scale much like the "Background Video" widget.
The difference comes when the user scrolls down the page. If the page is longer than the browser window, the video will stay in place at the top of the page allowing for content to show on the rest of the page without the video behind it.
Cover Scroll works well giving you a high impact full-screen video header along with content on a neutral background as you move down the page.