Skip to main content
Video list widget

How to display videos and text in a customised list or grid on your website.

Dave Quested avatar
Written by Dave Quested
Updated over a year ago

What is a video list?

A video list is a way of displaying playable video thumbnails with descriptions. Video lists have a range of settings that can be used to customise the arrangement of the video thumbnails and the appearance and behaviour of the scroll-triggered animation.

Once a video list has been added, it can then be displayed on your website by adding it to the content of a row column.

How do I add a video list?

In the admin area

For a video list that displays the video thumbnails in individual rows:

  1. Go to Website > Widgets.

  2. Click the Add button in the top right.

  3. Click the Video list icon.

  4. Enter a Title.

  5. Select the List option from the listing arrangement Layout drop-down menu.

  6. Select a listing arrangement Alignment.

  7. Select a listing arrangement Horizontal layout.

  8. Optionally, select a listing animation Type.

  9. Enter a listing animation Duration.

  10. Tick/un-tick listing animation Only play the animation once.

  11. Click the Add button.

For a video list that displays a number of video thumbnails per row:

  1. Go to Website > Widgets.

  2. Click the Add button in the top right.

  3. Click the Video list icon.

  4. Enter a Title.

  5. Select the Grid option from the listing arrangement Layout drop-down menu.

  6. Select a listing arrangement Orientation.

  7. Select a listing arrangement Alignment.

  8. Select a listing arrangement Horizontal layout*.

  9. Enter a listing arrangement Maximum per row.

  10. Enter a listing arrangement Minimum width.

  11. Optionally, select a listing animation Type.

  12. Enter a listing animation Duration.

  13. Tick/un-tick listing animation Only play the animation once.

  14. Click the Add button.

You can now add this widget to your website but it will only be visible if it contains videos, see How do I add a video to a video list.

* Only available if the Listing orientation is set to Horizontal.

How do I edit a video list?

In the admin area

  1. Go to Website > Widgets.

  2. Find the video list you are looking for and click the Edit button in the Options column.

  3. Edit the video list's details.

  4. Click the Update button.

How do I delete a video list?

In the admin area

  1. Go to Website > Widgets.

  2. Find the video list you are looking for and click the Delete button in the Options column.

  3. Click the Delete button to confirm.

How do I add a video to a video list?

In the admin area

  1. Go to Website > Widgets.

  2. Find the video list you are looking for and click on it.

  3. Click the Widget tab.

  4. Click the Add button above the Video list.

  5. Select a Type.

  6. Enter a URL or ID.

  7. Optionally, enter a Description.

  8. Select a Status.

  9. Click the Add button.

How do I edit a video?

In the admin area

  1. Go to Website > Widgets.

  2. Find the video list you are looking for and click on it.

  3. Find the video you are looking for and click the Edit button in the Options column.

  4. Edit the video's details.

  5. Click the Update button.

How do I move a video?

In the admin area

  1. Go to Website > Widgets.

  2. Find the video list you are looking for and click on it.

  3. Find the video you are looking for in the Videos list and click and hold the arrow icon to drag the video up or down.

How do I delete a video?

In the admin area

  1. Go to Website > Widgets.

  2. Find the video list you are looking for and click on it.

  3. Click the Widget tab.

  4. Find the video you are looking for and click the Delete button in the Options column.

  5. Click the Delete button.

How do the settings affect the appearance of a video list?

The range of customisation settings available depends on which listing arrangement layout option is used.

For a video list using the List option:

  • Listing arrangement alignment - Changes the alignment of any text to left-aligned or center-aligned.

  • Listing arrangement horizontal layout - Changes the ratio of the text and the image.

  • Listing animation type - Changes which animation will play when a customer scrolls past the video list.

  • Listing animation duration - Changes the speed of the animation, a longer duration means the animation will be slower.

  • Listing animation only play the animation once - Sets the animation to only play the first time the customer scrolls past the video list or to play every time the customer scrolls past the video list.

For a video list using the Grid option:

  • Listing arrangement orientation - Changes the orientation of the listing content to vertically (image above, text below) or horizontally (image on the left, text on the right).

  • Listing arrangement alignment - Changes the alignment of any text to left-aligned or center-aligned.

  • Listing arrangement horizontal layout* - Changes the ratio of the text and the image.

  • Listing arrangement maximum per row - Sets the maximum number of videos you want to display per row in the grid. (e.g. 3 per row, 4 per row, etc).

  • Listing arrangement minimum width - Sets the minimum width of a video. This determines when the videos will wrap on to the next row in the grid when the space available is reduced.

  • Listing animation type - Changes which animation will play when a customer scrolls past the video list.

  • Listing animation duration - Changes the speed of the animation, a longer duration means the animation will be slower.

  • Listing animation only play the animation once - Sets the animation to only play the first time the customer scrolls past the video list or to play every time the customer scrolls past the video list.

* Only available if the listing Orientation is set to Horizontal.

Can I see some examples of video lists?

Sure, the range of settings can feel a little bit daunting the first time you use them. Here are a few examples of video lists with their settings to help you get started.

Example 1

The settings for this video list are:

  • Listing arrangement layout - List

  • Listing arrangement alignment - Left

  • Listing arrangement horizontal layout - Video 33% / Description 66%

Example 2

This settings for this video list are:

  • Listing arrangement layout - Grid

  • Listing arrangement orientation - Vertical

  • Listing arrangement alignment - Left

  • Listing arrangement maximum per row - 4

  • Listing arrangement minimum width - 180px

Did this answer your question?