Grid Layout

The header is created using the CSS Grid Layout Module. The grid has 8 columns with the text block occupying the first four and the background image the rest. The slide in video player is floated over the header by placing it in column 3 to span four columns and aligning it vertically in the center.
The optional logo can be placed at the top or bottom left and its distance in can be adjusted in the widget settings. In this demo, the logo is positioned at the bottom of the header because the RGL Overlay Navigation widget is positioned at the top.
Animation
The slide in animations are created by allowing the items to transition in on the x-axis from a position offset to the left or right. There are controls for setting the animation time and delay in seconds for each item.
The speed at which the items enter can be adjusted by changing the distance they have to travel. The longer the distance - the faster they go.
In the example, the text is offset by 200px and the video by 500px. If high speed is your thing, set these to about 2000px.
Text Block
The h1 heading and the text can be aligned left, center or right as can the optional CTA style link. The link is configured to open an internal page.
The text can use a web safe font or a non websafe or Google hosted font with a web safe fallback. If an Apple font that is not available for Windows users is inserted, make sure the fallback font has the same characteristics as the first choice font.
Video
The animated video player shows a poster image on page load and has options to add a video title, a border and/or a box shadow. The video player has a maximum width setting.
There are controls for selecting the poster image and the MP4 video file which should both have the same aspect ratio.
There are checkboxes for turning on autoplay, muted and loop and to play inline on iPhones.
Note: The video soundtrack must be muted if autoplay is selected.