Hero MP4 Video

This widget attempts to achieve the impossible by inserting an MP4 video file with 100% width and a fixed height. The video file is set to auto preload, autoplay and loop. Increase/decrease the browser width to see the effect.
When the page is viewed on a touch device like an iPad, autoplay is not possible so there is a play/pause control which appears when the viewport is 1059px or less so that touch device users can play the video if they choose to.
Video File
The file used in this example is an MP4, H.264 encoded with dimensions of 1200 x 675, a file size of 2MB and a 15 second duration. The video was reduced from its original size for faster download. The larger the file, the longer it will take to load and the more it will drain device batteries.
How It Works
Some CSS trickery is used to allow the video to have 100% width and a fixed height. The video element is positioned to left:50% and top:50%. Since this would place it half way down the page and half way in from the left. a CSS transform is used to reposition it in the top left by using "transform:translateX(-50%) translateY(-50%)"
This may seem counter productive but what is does is to allow us to manipulate the relative percentage distance from the top to create a fixed height.
This works fine when the project is created in a code editor. Inserting it into EverWeb is a little more difficult due to the fact that the aplication wraps every item in a couple of divs to allow use to position them on the page. Now comes the trial and error part …
Widget Setup
To set up and test this widget requires a large screen. A 27inch iMac is ideal.
Insert the widget, check the Full Width box in the Metrics inspector and set the widget height to about 1500px in height.
Choose the video file and, using the slider, reduce the value for relative height to set the required video height.
Use the Preview button or publish to a local folder to launch the page in the browser.
Set the page to full screen. To do this in Safari use:  option + command + f
If the video file covers the whole browser width, the height of the widget can be reduced and the relative height increased if required.
If the video file does not cover the browser width, increase the height of the widget and reset the relative width.
In this example, the widget height is set to 1500px and the relative height to 4
Since very few visitors will actually view the page at this width, the widget height can be reduced to allow more scope for adjusting the height.