The Video playlist content type allows you to add multiple videos to your web pages. This consists of one featured video and a scrollable list of other videos to the right of it. It is possible to add up to 20 videos to your playlist, but only five will display on the screen; the remaining videos will require scrolling. You can add more than one instance of a Video playlist to your page if you want to feature different playlists. There is a live example of this content type at the bottom of the page.
Before you start
In order to add a video to a T4 page it must first be uploaded to one of these three platforms; YouTube, Vimeo or Pantopto.
Instructions
There are three main steps for setting up a video playlist - 1) to set up the folder structure 2) adding your Video playlist item(s) and 3) to add the Video playlist widget content type to your page.
Step one: Create the VideoPlaylist folder structure
1. Create a hidden section called VideoPlaylist, (it must be exactly as written; one word, capital V and P), as a sub-section (child) of the section (page) where the video playlist will live. Find out more about how to add a hidden sub-section to a page.
2. Create a second hidden sub-section of VideoPlaylist which you have just made, this is where you will add your video playlist items. In this example, the second hidden folder is called Playlist 1, but you can name it whatever you like. Find out more about how to add a hidden sub-section to a page.
See graphic below, showing the hidden VideoPlaylist section and the Playlist 1 sub-section. Hidden folders are the ones with the white folder icon.
Step two: Add your video items
1. Navigate to your newly created sub-section (in my example Playlist 1)
2. Click on the blue Actions button and select Create content.
3. Select Video - playlist item from the content type list. (Find out how to add a content type to a section),
4. Fill in the form, as below:
Field title | What should I do? | Is it compulsory? |
Name* |
Give each item a name these will appear on the page in alphabetical order e.g. A video, B video, C video etc. Note: As with other similar content types like Accordions, Image grid and People list, to control the order in which the items appear, they should be named with numeric or alphabetic prefixes thus: a - item description, b - item description etc., OR 1 - item description, 2 - item description etc. This is because T4 will display the items in alphabetical order. |
Yes |
Video URL* | Paste in the URL of your video - we support YouTube, Vimeo and Panopto e.g. https://www.youtube.com/watch?v=MmO88dkquy8 | Yes |
Video title* | Enter the video title (Max 60 characters) | Yes |
Video placeholder text* | This should be the video title or very brief description, this is readable by screenreaders and serach engines (Max 60 characters) | Yes |
Video short description* | Add a short description of the video content (Max 100 characters), this will display in the playlist when video is not loaded | Yes |
Video description | Add a longer description of the video content (max 2000 characters), this is visible in the maina rea when the video is loaded | No |
New image | Adds a placeholder for the image. Click Select media to choose a image from the Media Library or to upload a new image. An image of 3000 pixels (wide) by 2000 pixels (high) is required for this content type. Please view the guidance on adding and selecting images in the Media Library. | No |
Display item* | Default is ticked | Yes |
5. Click Save and approve to save your changes.
Repeat these fivve steps for each item you want to add to the slideshow.
Step three: Add the Video playlist wideget to your page
1. Navigate to the page where you want the slideshow to appear.
2. Click the blue Actions button and select Create content.
3. Select Video playlist widget content type from the content type list.
4. Fill in the form, as below:
Field title | What should I do? | Is it compulsory? |
Name* | Name the video playlist (Max 80 characters), in this example: Sample videos |
Yes |
Title* | Add a block title (Max 50 characters) | Yes |
Show title? | Tick yes to show the title, otherwise the title is hidden and only visible to screen readers | No |
Find items* | Click Add section link and select the sub-section where you added your items. In my example it was 'Playlist 1' | Yes |
Display items* | Defaults to ticked | Yes |
Your completed form will look something like this:
5. Click Save and approve to save your changes.
Adding more than one playlist on a page
If you want to add more playlists, you will need to create another sub-section of VideoPlaylist, for example Playlist 2. This is where you would add the items for the second playlist.
You will then need to add a second Video playlist widget to your page which pulls in the items from your second sub-section.
Here is a live example
The Georgina Mace Centre for the Living Planet Debate
The Georgina Mace Centre for the Living Planet Debate, 18 July 2024.
The Georgina Mace Centre for the Living Planet Debate, 18 July 2024. Imperial College London, Silwood Park. Imperial’s Georgina Mace Centre for the Living Planet tackles some of the greatest environmental challenges. The Centre is dedicated to Professor Dame Georgina Mace FRS, who pioneered the development of universal criteria for listing the world’s threatened species in the International Union for the Conservation of Nature (IUCN) Red list. This led in 2002 to the global signatories to the United Nations Convention on Biological Diversity (CBD).
Introducing LUNAR
LUNAR is an experimental educational programme by Imperial College London
LUNAR is an experimental educational programme by Imperial College London in collaboration with Amanda Lee Falkenberg. It introduces unique lunar zones and their distinguishing characteristics on several moons in our Solar System, highlighting the science through music.
Education and staff-student partnership at Imperial
Education and staff-student partnership at Imperial College London
What inspired me to study at Imperial College London
From Imperial's central London location to following in the footsteps of family members, our student
From Imperial's central London location to following in the footsteps of family members, our students have a vast range of reasons why they chose to study at Imperial.