Featured Video
Add a featured video panel. An image is displayed with callout text, when clicked the video is played in a modal.
How to use
- Optionally add Quick-Nav Text to be picked up the Quick Navigation Bar/Progress Navigation Bar
- Choose a Background Colour: Orange, Pink or White
- 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 2160px x 1136px. The image can be any size or aspect ratio, and will be cropped and resized to 2160px x 1136px automatically by a service called PXL. Find out how PXL crop and resize works. - Add a Video Callout, this is text that displays next to the play button over the Video Image
- 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 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
Content Type Details
ID: 475
Name: Featured Video
Description: Add a featured video panel. An image is displayed with callout text, when clicked the video is played in a modal.
Minimum user level: Contributor
Content Type Elements Details
| Name | Description | Size | Type | Required |
|---|---|---|---|---|
| Name | The Name Element | 80 Characters | Plain Text | Yes |
| Quick-Nav Text | This text will be used for the Quick Navigation Bar/Progress Navigation | 50 Characters | Plain Text | No |
| Video Title | Optional title for video | 80 Characters | Plain Text | No |
| Video Description | Optional description for video | 200 Characters | Plain Text | No |
| Background Colour | Select the colour of the Background | N/A | Select Box (List: Featured Video Colour) | No |
| Video Image | An image for the card, if adding a YouTube video you can leave blank to use the YouTube thumbnail | N/A | Media | No |
| Video Callout | A callout message about the video | 150 Characters | Plain Text | Yes |
| Video URL | Add the full embed URL of a YouTube or Vimeo video, see component library library for guidance | 5000 Characters | Plain Text | Yes |
| Transcript | Add a transcript of the video for accessibility | 100000 Characters | HTML | No |
Examples
YouTube, White with Title and Description
/0x2:4320x2274/prod01/channel_3/media/middlesex-university/site-assets/component-library/page-designs/video-banner-ph-1.3af9911f.jpg)
YouTube, Pink, with Title
Vimeo Orange
YouTube White with Transcript