Video Card
This content type can allows you to embed videos from YouTube or Vimeo in a card format, with options for different background colours.
How to use
This content type can be used to load videos from YouTube or Vimeo onto your page.
The following URLS will display the video:
YouTube links
https://youtu.be/DbZALsDfLuU?feature=shared - share link
https://www.youtube.com/watch?v=DbZALsDfLuU - full URL
https://www.youtube.com/embed/DbZALsDfLuU?si=CDXYoOAOwgbR3R8j - embed URL
Vimeo URL
https://vimeo.com/415806305
To add a video to your page, you will need to know the Video web address (URL), title and description.
The background colour is optional.
Video Card with Dark Grey Background.
This is a description about the video to introduce visitors to the content of the video. Our university is pulsing with people, energy and ideas. Discover more about our community of staff, students and alumni, and how one of the world’s great cities is home to one of the world’s great universities – Trinity College Dublin.
About TrinityVideo Card with Light Grey Background
This video card has a Light Grey background and is displaying a video from YouTube.
Video Card with No Background
This video card has no background. It is displaying a video from Vimeo.
Video card Content Type
ID: 332
Name: Video card
Description: Used to add video card to site.
The Video card content type will allow you to enter a YouTube or Vimeo ID and this will be rendered automatically.
Page layouts
This can be used on all page layouts but would advise full-width layouts.
Content Element Details
| Name | Description | Size | Type | Required |
|---|---|---|---|---|
| Name | The Name Element | 80 Characters | Plain Text | true |
| Video URL | Enter Video URL. | 150 Characters | Plain Text | true |
| Title | Enter the title | 150 Characters | Plain Text | true |
| Screen Reader Title | A hidden title that will be read by screen readers. This should provide a concise and descriptive summary of the video content | 250 Characters | Plain Text | true |
| Description | Enter Description | 430 Characters | Html | true |
| Background Colour | Select colour from list | 80 Characters | Select Box | false |
| Link Text | 80 Characters | Plain Text | false | |
| Internal Link | 80 Characters | Section/Content Link | false | |
| External Link | 200 Characters | Plain Text | false | |
| Button colour | 80 Characters | Select Box | false |