EverWeb Widgets FS Video

Slide Over Hero Image

Inserting a video in the background is not a very good idea anyway but especially not for a responsive page.
Viewport
Better results can be obtained by filling the viewport rather than the browser background. This video is inserted with 100% width and a height of 100vh.
A viewport unit is relative to the width or height of the browser or device window so, giving the video a height of 100vh results in it filling the full height of the window no matter what size it is.
Inserting a video this way not only makes it more efficient but the video quality will be a lot better compared with ons set in the browser background.
The video is inserted using CSS rather than jQuery so there is far less code required and it only needs one line of vanilla Javascript to implement the play/paise function.
Scroll Over
By default, the video is positioned relatively and will scroll with the rest of the page content. To give the impression of filling the background, the video can be fixed in position to allow the content to scroll over as can be seen in this example.
Play/Pause
In this example, the video player loads a poster image and the video file is prevented from downloading until the optional play button or the image is clicked or tapped.
The video can be paused by clicking or tapping it.
Controls
There are checkboxes to turn on the loop function and to play the video inline when viewed on an iPhone which gives a better viewing experience for mobile phone users.
Autoplay
Although the video can autoplay, this is not a good option for mobile device users and the video sountrack will need to be muted. If autoplay is used, the play button and the poster image can be omitted and the autoplay and muted controls turned on.
Heading
The video overlay has a grid layout so the heaading can be positioned at the top or bottom by setting the align-self property yo "start" or "end".
The heading can use a Google hosted font with a web safe fallback, There are controls for font size, mobile font size, font style and weight, color and padding and the background color has an opacity slider.

Media Files

The size of media files needs to be carefully considered when designing responsive pages. Using files that are not optimisied can kill the web page's performance on mobile devices.
Image
The image used in this demo was cropped to 960 x 540px before importing into EverWeb. This has a file size of about 60KB with a file size of around 10.5MB and should give good enough quality in most situations without noticeably impairing page download speed.
MP4 Video
The MP4 video file in this case was reduced to 640px before importing into EverWeb. This may seem rather small but, in this case, the video is essentially just a background.
If better quality is required, the file with could be increased but tshould never be more than 1280px which will increase the file size to around 30MB.