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
| Name | Description | Size | Type | Required |
|---|---|---|---|---|
| Name | The Name Element | 80 Characters | Plain Text | Yes |
| Title | This is the content title | 150 Characters | Plain Text | Yes |
| Quick-Nav Text | This text will be used for the Quick Navigation Bar/Progress Navigation | 20 Characters | Plain Text | No |
| Background Image | Select a suitable image from the Media Library | N/A | Media | Yes |
| Image Overlay | Apply an overlay to the image to improve the contrast ratio of the Title | N/A | Select Box (List: Image Overlay) | No |
| Video Image | Select a suitable image from the Media Library, if adding a YouTube video you can leave blank to use the YouTube thumbnail | N/A | Media | No |
| Video URL | Add the full embed URL of a YouTube or Vimeo video, see component library library for guidance | 250 Characters | Plain Text | Yes |
| Video Transcript | Add a transcript of the video for accessibility | 10000 Characters | HTML | No |
| Link 1 - Text | Add Link Text | 50 Characters | Plain Text | Yes |
| Link 1 - Internal Link | Link to an internal Section/Content | N/A | Section/Content Link | No |
| Link 1 - External URL | Enter full URL including https:// for external URL, only enter this if you are NOT entering an internal link | 250 Characters | Plain Text | No |
| Link 2 - Text | Add Link Text | 50 Characters | Plain Text | No |
| Link 2 - Internal Link | Select a section/content for an internal link | N/A | Section/Content Link | No |
| Link 2 - External URL | Enter full URL including https:// for external URL, only enter this if you are NOT entering an internal link | 250 Characters | Plain Text | No |
| Link 3 - Text | Add Link Text | 50 Characters | Plain Text | No |
| Link 3 - Internal Link | Select a section/content for an internal link | N/A | Section/Content Link | No |
| Link 3 - External URL | Enter full URL including https:// for external URL, only enter this if you are NOT entering an internal link | 250 Characters | Plain Text | No |
| Link 4 - Text | Add Link Text | 50 Characters | Plain Text | No |
| Link 4 - Internal Link | Select a section/content for an internal link | N/A | Section/Content Link | No |
| Link 4 - External URL | Enter full URL including https:// for external URL, only enter this if you are NOT entering an internal link | 250 Characters | Plain Text | No |
| Link 5 - Text | Add link Text | 50 Characters | Plain Text | Yes |
| Link 5 - Internal URL | Select a section/content for an internal link | N/A | Section/Content Link | Yes |
| Link 5 - External URL | Enter full URL including https:// for external URL, only enter this if you are NOT entering an internal link | 250 Characters | Plain Text | No |
Examples
4 Links
/82x0:5679x4096/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/feature-cta-ph-1.240770a8.jpg)
2 Links
Video With Transcript
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.
/0x0:822x520/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/video-ph-1.41920a5a.jpg)