This is a custom-developed WordPress theme based on TwentySixteen.
The homepage video is chosen on the client’s side from several pre-generated sources based on the height of the container (
The dark gradient at the top should be rendered into the video.
To come up with a list of frame sizes to create new videos, measure the height of
.site-header while changing the viewport width.
There are currently four static heights for
.site-header, though I also created a 1920px-wide video for viewports >= 1600px.
Each framesize should be wide enough to cover the entire range of viewport widths for that given height.
Take a look at the video source files to help understand how the system works.
The low-mo bitrate refers to a low-motion version of the video (basically still images fading into each other) for site visitors who have
prefers-reduced-motion enabled. (See this article for an introduction to the reduced motion media query.)
|Viewport Width||Container Height||Framesize||Bitrate||Low-mo bitrate|
More export details: