Full Width Responsive MP4 Video

Responsive Video

It's important to realise that it is not possible to insert a full width, fully responsive video into an EverWeb site without accepting some limitations.
In a fully responsive design, the video will increase in both width and height and the content below it will react accordingly. Due to EverWeb's need to apply fixed positioning to objects to allow the user to drag items around - rather than place them in the correct order in the HTML doc - responsive width items such as images and video files need to be restricted in the way they move by applying limits to the width and/or the height.

The Widget

The Full Width Video widget can be used in two ways - either as an MP4 video player with a maximum width setting or as a background layer with 100% width and a fixed height.
The version on this page displays a video with poster image and controls which has been inserted at a width quite a bit wider than the content area but with a fixed height and a maximum width settings.
The example on the next page shows a video set to 100% width - with fixed height and autoplay - as a fixed position background layer so that the rest of the content slides over it on scroll.

The Media Files

Ideally, the video and the poster image should have a fairly large aspect ratio in the region of 16:9.
Both files need to be large enough to give decent quality at the maximu width settings.
The image file used in this example is 1280 x 544px so that it has the same aspect ratio of the video and will be of acceptable quality at the maximum width setting of 1150px.
There's really no need to set the video width any wider than 1200px since the visitor can use the fullscreen button if they need it larger.

Full Width Video Widget

Widget Settings

In this example, only the first few controls are required.
Choose the video file and the poster image, check the Full Width box in the Metrics inspector adjust the height to suit. Check the boxes to add controls and a maximum width settings and set the maximum width.
Test the result in the browser to make sure that the combination of maximum width and fixed height are satisfactory at various browser widths. Make sure the controls are in view at the maximum width and that the video doesn't cover the content below it.
If the page is intended for viewing on tablets, test it in the iOS Simulator to make sure the gap between the video and the content below isn't too wide. Reduce the maximum width to fix this if required.

EverWeb Widgets | Full Width

This widget is included in the Full Width widget pack.