Hero video

Hero videos can have an (optional) 16:9 poster image which loads first and delays the video initialisation for 5 seconds after the image has loaded.

If the poster image matches the first frame of the video, it's best to leave the switch between image and video as instant.

If the poster image is different, add the 'data-crossfade="true"' attribute to add a smooth 1 second transition.

You can also change the video initialisation delay by adding a 'data-delay="[value_in_milliseconds]"' attribute.

Add the optional 'hero--video-loading-sprite' DIV to display a 'loading' sprite.