Video Panel with Links

Highlight a video with full bleed background image, heading and 1-4 links.

How to use

  • Add a Title
  • Optionally add Quick-Nav Text to be picked up the Quick Navigation Bar/Progress Navigation Bar
  • Select a suitable image from the Media Library for the Background Image.
    Recommend image is at least 2200px x 1610px. The image can be any size or aspect ratio, and will be cropped and resized for desktop 2200px x 1610px and mobile 780px x 1688px automatically by a service called PXL. Find out how PXL crop and resize works.
  • Optionally add an Image Overlay. Use this to improve the contrast ratio of the text over the Background Image when using a lighter image, see Text Over Images.
  • If using a YouTube video leave the Video Image element blank and the default thumbnail from YouTube will be used. 
    Select a suitable image from the Media Library for the Video Image to overwrite the default YouTube thumbnail or add always for Vimeo videos.
    Recommend image is at least 822px x 520px. The image can be any size or aspect ratio, and will be cropped and resized to 822px x 520px automatically by a service called PXL. Find out how PXL crop and resize works.
  • Paste the URL for a YouTube or Vimeo video e.g., https://www.youtube.com/watch?v=zUlJWogLJYE or https://vimeo.com/678127987 in the Video URL element
  • Optionally add a Video Transcript, this is a transcript of spoken words which is a requirement for accessibility. When populated the transcript displays in the modal below the video in an accordion 
  • Add 1-4 Links. Add Link - Text for the button text and either select a section or content item for the Link - Internal Link (ignore the Use default link text checkbox), or paste the full URL for the Link - External URL (please do not enter both)

Content Type Details

ID: 444
Name: Video Panel with Links
Description: Highlight a video with background image, heading and 1-4 links
Minimum user level: Contributor

Content Type Elements Details

NameDescriptionSizeTypeRequired
NameThe Name Element80 CharactersPlain TextYes
TitleThis is the content title150 CharactersPlain TextYes
Quick-Nav TextThis text will be used for the Quick Navigation Bar/Progress Navigation20 CharactersPlain TextNo
Background ImageSelect a suitable image from the Media LibraryN/AMediaYes
Image OverlayApply an overlay to the image to improve the contrast ratio of the TitleN/ASelect Box
(List: Image Overlay)
No
Video ImageSelect a suitable image from the Media Library, if adding a YouTube video you can leave blank to use the YouTube thumbnailN/AMediaNo
Video URLAdd the full embed URL of a YouTube or Vimeo video, see component library library for guidance250 CharactersPlain TextYes
Video TranscriptAdd a transcript of the video for accessibility10000 CharactersHTMLNo
Link 1 - TextAdd Link Text50 CharactersPlain TextYes
Link 1 - Internal LinkLink to an internal Section/ContentN/ASection/Content LinkNo
Link 1 - External URLEnter full URL including https:// for external URL, only enter this if you are NOT entering an internal link250 CharactersPlain TextNo
Link 2 - TextAdd Link Text50 CharactersPlain TextNo
Link 2 - Internal LinkSelect a section/content for an internal linkN/ASection/Content LinkNo
Link 2 - External URLEnter full URL including https:// for external URL, only enter this if you are NOT entering an internal link250 CharactersPlain TextNo
Link 3 - TextAdd Link Text50 CharactersPlain TextNo
Link 3 - Internal LinkSelect a section/content for an internal linkN/ASection/Content LinkNo
Link 3 - External URLEnter full URL including https:// for external URL, only enter this if you are NOT entering an internal link250 CharactersPlain TextNo
Link 4 - TextAdd Link Text50 CharactersPlain TextNo
Link 4 - Internal LinkSelect a section/content for an internal linkN/ASection/Content LinkNo
Link 4 - External URLEnter full URL including https:// for external URL, only enter this if you are NOT entering an internal link250 CharactersPlain TextNo
Link 5 - TextAdd link Text50 CharactersPlain TextYes
Link 5 - Internal URLSelect a section/content for an internal linkN/ASection/Content LinkYes
Link 5 - External URLEnter full URL including https:// for external URL, only enter this if you are NOT entering an internal link250 CharactersPlain TextNo

Examples

4 Links

People in a cafe

2 Links

People in a cafe

Video With Transcript

People in a cafe

Support that's personal to you

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae mollis dui. Sed vitae luctus metus. Ut a iaculis metus. Vestibulum ut porttitor odio. Nullam molestie non tortor sed lobortis. Quisque vel scelerisque elit, mattis pretium nisi. Suspendisse viverra maximus enim, et pulvinar risus consequat eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel ante sed nibh vehicula auctor sit amet at urna. In dictum nunc ut ornare tempus.

Aenean euismod non felis id aliquam. Nunc magna mi, bibendum a fringilla ac, consectetur nec purus. Sed vel ultricies dolor, eget interdum lacus. Nunc et lectus imperdiet, luctus ipsum sit amet, euismod velit. Suspendisse potenti. Quisque sed mauris fermentum, posuere justo et, finibus est. Sed aliquet leo eu urna interdum, non posuere quam consequat. Sed aliquam a ligula quis venenatis. Ut sed mauris quis odio ornare efficitur. Cras eu mi sit amet orci viverra dapibus ac at dui. Morbi imperdiet odio et sapien elementum ullamcorper. Phasellus posuere feugiat viverra.

Ut vulputate fringilla est, at sollicitudin eros. Maecenas aliquam cursus lectus, ac facilisis eros auctor eleifend. Quisque id tincidunt enim. Suspendisse a blandit diam. Sed aliquam lacus vitae ex semper feugiat. Sed est nunc, finibus sit amet felis vitae, auctor viverra quam. Integer ut nisi ornare, vulputate tortor nec, congue enim. Vivamus ac aliquam tellus. Aliquam in ex eu ligula semper eleifend. Vestibulum finibus, ipsum eu rhoncus faucibus, nisl tortor porta nibh, eget varius libero arcu sed ligula. Nulla non ante pellentesque, consequat risus ut, pulvinar est.

Student laughing holding tablet