Hero MP4 Video
The video container fills the full width of the browser or device window and has a fixed height. The video fits the available space and remains responsive without distortion due to the use of the CSS selector "object-fit" which is set to "cover". Any overflow is hidden.
Loading On Demand
The video is not actually lazy loading as such. The video file only downloads "on demand" when the visitor clicks the play button. This obviously speeds up the page download time and saves mobile visitors from burning up their data allowance if they don't want to play the video.
The video file should be of good enough quality for viewing on wide screens. An aspect ration of 16:9 or higher gives better results.
The poster image should have the same aspect ratio as the video file. It should have a large enough file size to give reasonable quality without being so large it effects the page download speed.
The poster image in the demo was cropped to 1800 x 800px. The height being th same as that of the video container.
The video has options for loop and to mute the audio. The default browser generated controls are not used. Instead, there is a Play/Pause button which is situated near the top right in this demo. The button can be styled for color, background color and opacity, border radius and its position adjusted to appear anywhere on the video stage.
There is an optional progress bar which can be styled for height, background color and opacity and color.
The play from position can be selected by clicking on a point along the length of the bar.