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; YouTubeVimeo 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.

VideoPlaylist structure


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 AccordionsImage 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:

Completed video playlist widget form

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.

VideoPlaylist structure showing 2 sub-sections

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

Graduation in just over a minute

Imperial students receive their degrees in front of 7,000 friends, family and supporters, over three ceremonies in the Royal Albert Hall today.Today's event, the largest postgraduate graduation in the College's history will see nearly 3,000 new graduates join an international network of 170,000 alumni, supported by more than 50 alumni associations worldwide.

Graduation in just over a minute

Graduation in just over a minute

Commemoration day 2015 in high speed.

Imperial students receive their degrees in front of 7,000 friends, family and supporters, over three ceremonies in the Royal Albert Hall today.Today's event, the largest postgraduate graduation in the College's history will see nearly 3,000 new graduates join an international network of 170,000 alumni, supported by more than 50 alumni associations worldwide.

Introducing LUNAR

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.

How do psychedelic drugs work on the brain?

How do psychedelic drugs work on the brain?

Dr Robin Carhart-Harris talks about his scientific research into the effects and potential therapeut

Medicine in the mountains

Medicine in the mountains

Students from Imperial’s Remote Medicine BSc undertook a medical research expedition

In March 2022, eight medical students from Imperial College London’s Remote Medicine BSc undertook a medical research expedition to the Atlas Mountains (4167m), Morocco. Through this short film, they share insights into their experience of winter mountaineering, physiological research in an extreme environment and the challenges of working at high altitudes.