Video hero

To be used sparingly, the video hero provides one of the most impactful ways to present content to a user. Utilising one, or more, full screen videos which are auto-played when the page is loaded, starting with a random video, then progressing and looping through a provided list. The video player is responsive, falling back to a standard image header when viewed on smaller device sizes.

There are several important things to bear in mind when using videos. Firstly, if the video has UoD splash screens, these should be skipped as they will clash with the on-page branding. Videos should be full width/height and should not have "cinema bars", as these will potentiall be shown on the screen. A large proportion of the video will be covered by the content in the header, so this should inform the video choice appropriately. Note also, these videos are supposed to be eye-candy and not informative, in addition the videos lack sound or closed captions, so do not use these as an alternative to video embeds.

Also bear in mind that you should also adhere to all the rules when using a full screen image hero, as this is what will be presented to a mobile user.

When using the image hero, you should choose the light or dark theme based on legibility of the text over the video.

Note that the video header requires some advanced configuration, and may need to be set up by a member of the development team.

Key information

• Full bleed videos
• Multiple videos will loop
• Fallback image for smaller devices
• Optional breadcrumbs
• Optional CTA
• Video is fully responsive, scaling with screen size
• Easy set up, uses the Youtube API and JSON configuration
• The Scheme option controls the appearance of the header, breadcrumbs, page type tags and other elements like the 'scroll' indicator
• The Content scheme option controls the appearance of the feature block and the colour of the heading

Image/Video guidance

• Fallback image dimensions are 2560 x 1600px or in ThirdLight use 'Image hero' and crop images as required using the 'Constrain proportions' checkbox
• Video heros should be previewed at several window sizes to ensure that the image is displayed as intended on multiple devices and screen resolutions
• Abstract images/videos are highly recommended as the focal point is usually not as limited, and typically displays more consistenly across various devices
• Videos should be clipped to remove any video splash screens (this can be done in the video configuration)
• Videos should be a minimum of 720p
• Videos should not contain "Cinema bars" as these will be included on the header
• Videos should not contain baked in subtitles or text content
• All images must be optimised using TinyJPG before uploading to T4.

CTA

If the CTA is set to show the content type will look for a sub section called CTA in which you can add a Hero CTA content type. If one doesn't exist it will recurse up the site structure until it finds one.

This negates the need for you to set up a new CTA each time you add a hero and means a CTA can easily be set for a whole area of the site.

Heading

Add the text for your heading into the heading element as a paragraph.  The text will automatically bold, which is the standard, if you would like to emphasise a part of the heading manually bold those words and all other words will un-bold to show contrast.