---
title: "Video"
canonical: "https://docs.pbs.org/space/B3/4751468/Video"
format: markdown
---
> Macro (toc)

> ❌ <span style="color: #ff0000">**You must have a Media Manager API key in order to use this component.**</span>** **[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 component lets you add [Media Manager](https://docs.pbs.org/space/MM/5341192/Media+Manager) content or YouTube videos to your Bento site and create a video playlist, if you wish.

## Example

![image](media://8981fc84-035a-4775-8976-b2095a002351)

## How to add the Video component

- In a [block](https://pbs-docs.atlassian.net/wiki/spaces/B3/pages/4751596) in the content section of your page, click the **plus sign** to add a component (Figure 1.1).
- From the component menu, in the Audio/Visual section, click **video** (Figure 1.2).

Figure 1

![image](media://7b8740d2-6455-413d-9e55-97093d5882cb)

- Hover your mouse over the component until the Media Manager and YouTube boxes display in the upper left corner of the component. Click either **Media Manager **or **YouTube**, depending on the source that holds the video you want to use (Figure 2).

> ⚠️ **To add Media Manager videos, please be sure you have ****[requested a Media Manager API key](http://digitalsupport.pbs.org/support/tickets/new)**** when ****[setting up your site](https://pbs-docs.atlassian.net/wiki/spaces/B3/pages/4751441)****. **

Figure 2

![image](media://80b5f322-e893-46de-a157-38c94625b674)

## How to add a Media Manager video

> ⚠️ **To preserve optimal performance, please add no more than eight (8) Media Manager videos to a page. **

- In the upper left corner of the Video component, click **Media Manager **(Figure 1).

Figure 1

![image](media://3756e7fb-1f72-48c2-9986-dcbfa377f4dc)

- A list of Media Manager videos surfaces. Browse the list of videos or search in the following ways:
  - Type **keywords **in the textbox provided (Figure 2.1)
  - Click the* ****Search in***** dropdown menu **and select the **asset field** by which you want to search (Figure 2.2)
  - Click the ***Geo Includes***** dropdown menu** to search for videos available in certain areas of the world (Figure 2.3). *The US is selected by default.*
    - When making a selection here, only videos that are available in the selected area that you click 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.
- When finished making your selections, click the** magnifying glass icon** to initiate the search (Figure 2.4).

Figure 2

![image](media://4a7731bc-013c-4578-af2b-c75b2df485ec)

- When the video you want to use displays, click anywhere in the row to select it. It is highlighted when selected (Figure 3.1).
- Click** Add selected** (Figure 3.2).

Figure 3

![image](media://c3291b31-be7b-4d19-8e13-f0711fdd796f)

- When you add a Media Manager video, you are essentially making a copy of the original video. This means you can change the video fields without affecting the original file. The settings for your Media Manager video are located on the left side of the page. Figure 4 illustrates where each field displays on the video.
- Click the **toggles** to hide or show specific elements of the video, including:
  - Content Channel (Figure 4.1)
  - Title (Figure 4.2)
  - Description (Figure 4.3)
  - Playlist (Figure 4.4) [Learn more about the Playlist](https://docs.pbs.org/space/B3/4751468/Video#Add-a-Playlist)
  - Additional Information (Figure 4.5)
  - Endscreen (Figure 4.6)

> ℹ️ If you do not see the settings on the left side of the page, hover over the **component **and click the **cog icon** to surface the settings (Figure 4.7).

Figure 4

![image](media://bdcee150-dfdc-4803-81e4-3000ed1fc07d)

- When finished, click **Save** to save your page and click **Preview** to view the page in a browser (Figure 5).

Figure 5

![image](media://78ba2331-e1e2-4255-8dbf-d48e1cbbc780)

## Add a YouTube video

- In the upper left corner of the Video component, click **YouTube **(Figure 1).

Figure 1

![image](media://fe240220-3337-48dd-ad30-02580d36d45a)

- In the* YouTube Video URL* textbox, type the **full URL of the YouTube video** you want to use (Figure 2.1).
- Click **Next **(Figure 2.2).

Figure 2

![image](media://192126eb-e10d-4495-af1e-da6eb1c346ad)

- When the YouTube Video settings modal displays, click the **toggles **to display or hide the following features:
  - Show Related Videos (Figure 3.1)
  - Autoplay (Figure 3.2)
  - Show Controls (Figure 3.3)
  - Show Fullscreen Button (Figure 3.4)
- If you want the video to start and end at a specific point in the video, in the textboxes provided type the time in seconds where you want the video to begin and end:
  - In the Start textbox, type the **time in seconds **from the beginning of the video that you want the video to start when the user clicks the play button (Figure 3.5)
  - In the End textbox, type the **time in seconds **from the end of the video that you want the video to end (Figure 3.6)
- When finished, click **Save **(Figure 3.7).

> ⚠️ **If you do not see the settings on the left side of the page, hover over the component and click the cog icon to display the settings.**
> ⚠️ 
> ⚠️ > Macro (legacy-content)

Figure 3

![image](media://ac005a9b-807e-442e-9008-db176f54e795)

- You can change the content channel, title, and description on your Bento copy of the YouTube video without affecting the original YouTube video file. The settings for your YouTube video are located on the left side of the page. Click the **toggles** to hide or show specific elements of the video, including:
  - Content Channel (Figure 4.1)
  - Title (Figure 4.2)
  - Description (Figure 4.3)
  - Playlist (Figure 4.4) [Learn more about the Playlist](https://docs.pbs.org/space/B3/4751468/Video#Add-a-Playlist)
  - <span style="color: #c1c7d0">Additional Information - </span><span style="color: #c1c7d0">***This is not available for YouTube videos***</span>
  - Endscreen (Figure 4.5)

Figure 4

![image](media://f4c8939a-4e9e-4131-b539-b90da13f03dd)

- When finished, click **Save** to save your page and click **Preview** to view the page in a browser (Figure 5).

Figure 5

![image](media://8b3c25a4-ac4f-4bd5-853a-6362fcd2b2b2)

## Add a Playlist

A video playlist displays a series of thumbnail images that, when clicked, open a video. Users can easily click the thumbnails to choose a different video. 

- Begin by making sure the toggle for the Playlist is set to ON (Figure 1.1).
- The playlist appears beneath the video that you already have added to your page (Figure 1.2). The existing video displays as the first thumbnail in your video playlist.

> ⚠️ **If you do not see the settings on the left side of the page, hover over the component and click the cog icon to surface the settings.**
> ⚠️ 
> ⚠️ > Macro (legacy-content)

Figure 1

![image](media://6431cb55-0d13-468a-80fb-5bf89052f7f4)

- Hover over the playlist and click either **Media Manager **or **YouTube**, depending on which type of video you want to add (Figure 2).

> ⚠️ **To add Media Manager videos, please be sure you have ****[requested a Media Manager API key](http://digitalsupport.pbs.org/support/tickets/new)**** when ****[setting up your site](https://pbs-docs.atlassian.net/wiki/spaces/B3/pages/4751441)****. **

Figure 2

![image](media://40463613-bcb8-45c6-bdc1-3e3978ba2226)

- You can edit any of the text fields in the playlist (Figure 3.1).
- When finished, click **Save** to save your page and click **Preview** to view it in a browser (Figure 3.2).

Figure 3

![image](media://c1dc0ce1-4b78-4097-bc17-e79827ab8634)

## Rearrange Playlist items

<details>
<summary>View a short tutorial</summary>

![video-playlist-rearrange.mp4](media://140fed7b-12ff-47ef-b974-ca0804622614)
</details>

Once you've added videos to your playlist, you can rearrange the order of the videos at any time.

- Once you've clicked the** Playlist toggle** so that it displays on (Figure 1.1) and have added all of your videos, click the **patterned block** located in the upper left side when you hover over each playlist item (Figure 1.2).
- Holding your mouse, drag the item to the new location and release your mouse. The video is in its new location.*** Be sure to save the page!***

Figure 1

![image](media://c59d8f65-3d4d-473e-a709-647318d557cc)