Video Playlist
A video player with a clickable playlist.
The Video Playlist shows a video player next to a clickable list of videos, each with a title, thumbnail, duration and short description. Use it for a course, a series of tutorials or a collection of project films. The list sits to the right, left or below the player, the next video can start automatically, and YouTube and Vimeo players load only when a video is played.
Add a video playlist
Insert it
Open Insert in the left panel, find Video Playlist under Media (or type
playlistin Search widgets) and click it or drag it onto the canvas.Add the videos
In Content → Videos, click Add item for each video. Type its Title, paste a YouTube, Vimeo or MP4 Video URL (or choose Or a video file), and add a Duration and Description.
Add thumbnails
YouTube videos get their thumbnail automatically. Give Vimeo and file videos a Thumbnail image.
Arrange it
Set the Playlist title, then pick the List position in Content → Layout. Choose Below on mobile.
Settings
Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing).
Content tab
Videos
| Setting | What it does |
|---|---|
| Videos | The videos. Add item, drag to reorder, Duplicate item and Delete item. |
| Playlist title | Shown above the list and read by screen readers as its name. |
| Show position (2 / 5) | Shows the position of the current video, such as 2 / 5. On by default. |
Each video
| Setting | What it does |
|---|---|
| Title | Title of the video in the list. |
| Video URL | A YouTube or Vimeo link, or the address of an MP4 or WebM file. |
| Or a video file | A video from the media library, used instead of the URL. |
| Thumbnail | The image in the list and on the player before it plays. YouTube videos use their own thumbnail when it is empty; give Vimeo and file videos one. |
| Duration | The length shown on the thumbnail, such as 4:32. |
| Description | A short line under the title. |
Layout
| Setting | What it does |
|---|---|
| List position | Puts the list right, left or below the player. Below often works best on mobile. Options: Left, Right, Below. Default: Right. Per device. |
| List width | Width of the list when it sits beside the player. Per device. |
| List height | Maximum height of the list when it sits below the player; it scrolls beyond that. Beside the player the list matches the player height. Per device. |
| Player aspect ratio | Shape of the player. Default: 16:9. Per device. |
| Show thumbnails | Shows a thumbnail on each row. On by default. |
| Show durations | Shows the durations. On by default. |
| Show descriptions | Shows the descriptions. On by default. |
Playback
| Setting | What it does |
|---|---|
| Play the next video automatically | Starts the next video in the list when one ends. On by default. |
| Loop the playlist | Goes back to the first video after the last one. Shown when Play the next video automatically is on. |
| Privacy mode | Uses youtube-nocookie.com for YouTube and “do not track” for Vimeo. On by default. |
| Play icon | Icon of the play button. |
Design tab
Player
| Setting | What it does |
|---|---|
| Gap to the list | Space between the player and the list. Per device. |
| Border radius | Rounds the corners of the player. Per device. |
| Shadow | Shadow of the player. |
| Play button › Size | Size of the play button. Per device. |
| Play button › Icon color | Color of the play icon. |
| Play button › Background | Background color of the play button. |
| Play button › Hover background | Background color of the play button on hover. |
List
| Setting | What it does |
|---|---|
| Background | Background color of the list. |
| Padding | Space inside the list. Per device. |
| Border radius | Rounds the corners of the list. Per device. |
| Border | Border of the list. |
| Space between items | Space between the rows. Per device. |
| Item padding | Space inside each row. Per device. |
| Item radius | Rounds the corners of each row. Per device. |
| Normal › Text color | Text color of the rows. |
| Normal › Background | Background color of the rows. |
| Hover › Text color | Text color of a row on hover. |
| Hover › Background | Background color of a row on hover. |
| Active › Text color | Text color of the playing video’s row. |
| Active › Background | Background color of the playing video’s row. |
| Active › Indicator color | Color of the line that marks the playing video. |
Text
| Setting | What it does |
|---|---|
| Playlist title | Text style of the playlist title. |
| Playlist title color | Color of the playlist title. |
| Video titles | Text style of the video titles. |
| Descriptions | Text style of the descriptions. |
| Description color | Color of the descriptions. |
| Duration color | Text color of the durations. |
| Duration background | Background color of the durations. |
Thumbnails
This section shows when Show thumbnails is on.
| Setting | What it does |
|---|---|
| Width | Width of the thumbnails. Per device. |
| Border radius | Rounds the corners of the thumbnails. Per device. |
Shared Design sections
Every element also has these sections at the end of the Design tab.
| Section | What it does |
|---|---|
| Spacing & position | Margin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position. |
| Background & border | Background, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows. |
| Mask | Crops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks. |
Behaviour tab
Behaviour sections
The Behaviour tab is the same for every element.
| Section | What it does |
|---|---|
| Anchor & classes | An Anchor ID for #links and your own CSS classes. |
| Animations | Entrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects. |
| Motion & effects | A simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning. |
| Scroll & mouse effects | Movement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt). |
| Visibility | Hide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility. |
| Conditions | Show the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions. |
| Interactions | Show, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions. |
| Attributes | Custom HTML attributes for this element. See Anchor, classes & attributes. |
Tips
- Privacy. Players load only when a visitor plays a video, and Privacy mode uses youtube-nocookie.com and Vimeo's “do not track” option. YouTube thumbnails you don't replace come from YouTube's image server.
- Series. Play the next video automatically plays the list in order; add Loop the playlist to start again after the last video.
- Position shown. Show position (2 / 5) helps visitors see how far they are in a course.