---
title: "Video List"
canonical: "https://docs.pbs.org/space/B3/4751549/Video%20List"
format: markdown
---
> Macro (toc)
> ❌ **You must have a Media Manager API key in order to use this component.**** **[Click here to request a key](http://digitalsupport.pbs.org/support/tickets/new)
> ❌
> ❌ Not sure if you have a key already? Check the [Site Settings section](https://docs.pbs.org/space/B3/4751441/Setting+Up+Your+Site#Integrations) of your Bento site.
## Overview
The Video List component displays publicly available as well as Passport [Media Manager](https://pbs-docs.atlassian.net/wiki/spaces/MM) videos, providing an easy way to deliver video content to your users. The list automatically populates with videos that are associated with shows that you have selected. **There is no limit to how many videos you can include in this list.** When the number of videos exceeds what is allowed per page, select from three pagination options that are available so your users can browse. [Learn more about pagination](https://docs.pbs.org/space/B3/4751549/Video+List#Number-of-Videos-and-Display-Styling)
> 📝 **For sites that currently display more than eight (8) videos at a time, they will automatically be reprogrammed to display eight videos to be in line with the new format. **
## Requirements
**Before using this component, you must first ****[submit a support ticket](http://digitalsupport.pbs.org/support/tickets/new)**** to request a Media Manager Account API key and secret for your Bento site.** The API key maps the shows that are available to your site in [Media Manager](https://docs.pbs.org/space/MM/5341192/Media+Manager) and is added to the Site Settings section of your site.
See where this setting is located on your Bento site
## Features
The following features are available in the video list component.
| **Feature** | **Description** |
| --- | --- |
| Video List Title | The main heading for the entire video list |
| Show | Show(s) that contain the videos you choose to display |
| Seasons | Seasons of each selected show. When adding multiple shows, *All Seasons* is selected by default and cannot be changed. |
| Video Type | The type of videos to search and display. Options include:
- All (displays all types of videos)
- Clip
- Preview
- Episode
- Special |
| Geo Includes | Areas of the world in which videos can be viewed. Only videos available in the selected areas display in your video list |
| Number of Videos per Page | The number of videos that display on each section |
| Display Styling | The method by which users can move to the next section of videos. Options include:
- **Carousel**: User moves through each video using two arrows on the left and right of the visible row of videos
- **Pagination**: User moves through videos by clicking page numbers located at the bottom of the video player
- ***Load more***** button**: User moves through videos by clicking a “Load more” button located at the bottom of the video player |
| **Display Options** |
| Video List Title | The title of the video list that displays at the top of the player |
| Show Title | The title of the show (This is programmed in [Media Manager](https://docs.pbs.org/space/MM/5341192/Media+Manager)) |
| Video Title | The title of the video (This is programmed in [Media Manager](https://docs.pbs.org/space/MM/5341192/Media+Manager)) |
| Video Metadata | The metadata associated with the video (This is programmed in [Media Manager](https://docs.pbs.org/space/MM/5341192/Media+Manager)) |
| Video Description | The description associated with the video. This cannot be hidden in the featured video at the top of the video list. |
| Include Passport Videos | Display or hide Passport videos |
| Season Filter | Display or hide a button that allows users to view specific seasons |
| **Advanced Settings** |
| Playback | Determines how each video displays and plays in the video player. The two options are:
**Auto Play** - Plays the video the automatically upon coming to the page
**Player Top Bar** - Places a bar at the top of the video that contains the following buttons:
- Information: More information about the video
- Embed: Code to embed the video
- Share: Share the video
- Shopping: A link to various purchase options |
| Call to Action Options | Displays a custom button that leads users to view additional content.
- **Video Call to Action**: A customizable button that, when clicked, directs the user to a custom URL
- **Show Call to Action**: Displays “Watch All Episodes” and, when clicked, directs the user to a custom URL |
| Display Order | Determines the order that the videos display.
- **By Descending Order** (Display videos in the order of most recent to oldest)
- **By Ascending Order** (Display videos in the order of oldest to most recent) |
## Example
## How to implement the Video List component
- In a one column or two-thirds column layout in a section of your page, click the** plus sign** to expand the component menu (Figure 1.1).
- In the *Audio/Visual* section, click **video list** (Figure 1.2).
> ⚠️ **This component is available in a one column or two-thirds column layout only.**
Figure 1
- Click **Video List Title** and type the** title of your video list** (Figure 2). This is the title users will see when they come to your site and view the video list.
Figure 2
- After typing the title of your video list, a full navigation menu displays on the left side of the page (Figure 3.1).
> ⚠️ **If you do not see the settings on the left side of the page, hover over your video list title and click the setting cog icon (Figure 3.2).**
Figure 3
### Add Shows
- In the Content Population searchbox, begin typing the **name of the show or shows** that hold the videos you want to add to your video list (Figure 1.1).
- As you begin typing the name of the show, all possible matches display. Click **the title of the show** to add videos associated with that show (Figure 1.2). **Repeat this for each additional show.** You may include an unlimited number of shows.
Figure 1
### Add Seasons
- All seasons of the selected show displays by default* (Figure 1.1).
- Click inside the Seasons textbox and all available seasons display (Figure 1.2). Click the seasons you want to include. You may click as many as you want.
* *If more than one show is selected in your video list, *All Seasons* displays by default and individual seasons cannot be selected.*
Figure 1
### Select Video Type
- In the *Video Type* section, click the** radio button** next to the type of video you want to search for and include in your video list (Figure 1.1).
- If no results display for a particular type of video (e.g.: clips), click the **radio button next to *****All*** to see what types of videos are available. The video list component will dynamically adjust to the types of videos that are available.
- In this example, we are selecting *Episodes*.
- Videos display by Encore date with the most recently published video first and the oldest video last, from top to bottom, left to right. To change the order that videos display, use the *Display Order* option in the [Advanced Settings](https://docs.pbs.org/space/B3/4751549/Video+List#Advanced-Settings) section.
- The first video in the list displays in a larger format at the top of the page with the video type displayed in the metadata (Figure 1.2). The large video also displays in the smaller format with the video type displayed in the metadata, like the rest of the videos that display (Figure 1.3).
Figure 1
### Select Geo Location
Geo location is the area of the world where videos are licensed to be available. When making a selection here, only videos that are available in the area that you select will display in your search results. For instance, if you select Canada, your search results will include videos available in the US and Canada. This means that the videos' geo restrictions are such that Canadian users are able to view the content but users in Mexico may not be able to view the content.
- Click the ***Geo Includes***** dropdown menu** to select the specific areas of the world that the videos you want to include are available (Figure 1.1). *The United States (US) is selected by default.*
- When the dropdown menu displays, click the** area **you want to see available videos (Figure 1.2).
- Keep in mind that when you change the geo location, sometimes videos in a different language display.
Figure 1
### Number of Videos and Display Styling
In this section, assign how many videos display on each viewable page and dictate how users advance to each subsequent page.
To assign how users advance to each subsequent page of videos, click the radio button next to the items under *Display Styling*. If you have selected *Carousel*, the number of videos per page cannot be modified. The *Pagination *and *Load more button* options allow you to display 4, 6, or 8 videos per page.
- Click the **radio button** next to *Pagination *or *Load more button* (Figure 1.1).
- **[Pagination](https://pbs-docs.atlassian.net/wiki/download/attachments/4751549/video-list-pagination.jpg?version=1&modificationDate=1594832149988&cacheVersion=1&api=v2)** - displays numbers at the bottom of each page which users can click to advance to the next page of results.
- **[Load more button](https://pbs-docs.atlassian.net/wiki/download/attachments/4751549/video-list-load-more.jpg?version=1&modificationDate=1594832161124&cacheVersion=1&api=v2)** - displays a button that the user can click to load more results further down the same page.
- Drag the** circle on the slider** to the right** **to select the number of videos to display per page (Figure 1.2). This option is not available if you select *Carousel*.
- The videos display and, depending on the selection you made in the Display Styling section, the method by which a user can advance to the next page displays at the bottom of the videos (Figure 1.3).
Figure 1
### Display Options
The Display Options section is where you can decide what parts of each video’s metadata you want to display. Click the **ON/OFF toggles** to hide or display features of each video list item. If the toggle displays ON, the feature displays; OFF hides the feature.
- In the **Display Options **section, See the features below and corresponding examples of the following items that can be displayed or hidden:
- **Video List Title** (Figure 1.1). This is the overarching title for the whole list.
- **Show Title **(Figure 1.2). The title of the show, [as programmed in Media Manager](https://docs.pbs.org/space/MM/5343796/Shows).
- **Video Title** (Figure 1.3). The title of the video, [as programmed in Media Manager](https://docs.pbs.org/space/MM/5343793).
- **Video Metadata** (Figure 1.4). The metadata for the show, [as programmed in Media Manager](https://docs.pbs.org/space/MM/5343793).
- **Video Description** (Figure 1.5): The video description in the large featured video at the top of your video list is pulled from the [long description](https://docs.pbs.org/space/MM/5343793#Core-Data) of the video in [Media Manager](https://docs.pbs.org/space/MM/5341192/Media+Manager). The shorter description that displays next to each subsequent video beneath is pulled from the short description of the video in Media Manager.
- **Include Passport Videos**. This determines if Passport videos display in your video list. When the toggle displays **ON**, Passport videos are included. Switch the toggle to **OFF **to omit Passport videos.
- **Season Filter **(Figure 1.6). Displays a dropdown menu of all seasons of a show.
Figure 1
### Advanced Settings
The Advanced Settings section holds functionality
Click the **arrow **next to the Advanced Settings heading to expand the section (Figure 1.1). Click the **ON/OFF toggles** so that they display ON if you want to activate the following features:
- Playback - Determines how each video displays and plays in the video player.
- **Auto Play**: The featured video at the top will begin playing as soon as the user comes to your video list (Figure 1.2).
- **Player Top Bar**: Includes information about the video and social sharing options on your video (Figure 1.3). Options can include the following but are not necessarily available, depending on the video:
- Information: More information about the video
- Embed: Code to embed the video
- Share: Share the video
- Shopping: A link to various purchase options
- Call to Action Options - Displays a custom button that leads users to view additional content.
- **Video Call to Action**: A customizable button that, when clicked, directs the user to a custom URL
- **Show Call to Action**: Displays “Watch All Episodes” and, when clicked, directs the user to a custom URL
- Display Order - Determines the order that the videos display.
- **By Descending Order**: Display videos in the order of most recent to oldest.
- **By Ascending Order**: Display videos in the order of oldest to most recent.
Figure 1
### Save the page
- When finished, **Save** and **Preview **the page (Figure 1).
Figure 1
