Play Video

Full Width Fixed Height Video Background Layer

Background Layer Video

In this context, the video is set up to be full width with a fixed height and fixed position so that the background layer below will slide over it on scroll. It is really only suitable for background video since the bottom half of the video will not be seen at wide browser settings.
The video must be set to autoplay since the controls will be hidden even if they are added.
Because the page may also be viewed on touch devices, a poster image is essential since the video won't autoplay on a device like an iPad.
To overcome this, there is an optional play/pause button which will appear at browser widths of less than 1059px so that tablet users can start and stop the video.
Reduce the browser width to see this in action.

Full Width Video Widget

Widget Settings

Check the Full Width box in the Metrics inspector and choose the MP4 video and image files.
Check the boxes for loop and/or muted if required.
Ignore the maximum width setting.

Play/Pause Button

Check the box to add the optional play/pause button for tablet users and check the next box to display it while styling it.
Set the button width to suit the text entered into the boxes for Play and Pause.
Set the font family, size and color and the background color and its opacity.
Adjust the button height using the value for padding.
Set the border width color and radius if required.
Add a box shadow if required by setting its radius and color.


Before publishing the page, uncheck the "Show Button" box to hide the button when the page is viewed on computers.
Check the autoplay button and publish.

EverWeb Widgets | Full Width

This widget is included in the Full Width widget pack.