Video Playlist Widget

Video Playlist Widget

Last updated 11.03.22

This Video Playlist widget is a plug and play component designed to dynamically display a video-playlist feed from YouTube or Vimeo. This documentation goes over recommended configuration settings. 

• Built to dynamically pull video playlist feeds from YouTube or Vimeo 
• Automatically displays video titles and descriptions 
• Automatically updates your playlist 
• Displays one large video as a feature and thumbnails of additional playlist videos 
• Sets maximum number of videos displayed 
• Can display a button to take the visitor to YouTube or Vimeo to explore more videos 

Related Links & Videos

Add Video Playlist Widget to the page

1. Select where on the page you would like the widget to appear. 
2. Click on the blue plus add widget icon   
3. Select the Video Playlist widget from the widget pop up 
4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon. 

Video Playlist Widget Properties

5.  In the Video Playlist properties pop up, adjust various settings including video type, playlist ID and number of videos displayed. 
6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to delete the Video Playlist Widget

Hover over the Video Playlist widget until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Video Playlist Widget

Hover over the Video Playlist widget until it displays the grab icon on the left. Simply drag and drop in a new location. 

Video Playlist Widget Properties

PROPERTYDESCRIPTION
Playlist Type Select the playlist type from:
• YouTube
• Vimeo
• [Atlas] Media Library
Playlist IDSourced from your YouTube Playlist, or Vimeo Showcase page .

YouTube Playlist ID: will be a long series of numbers and letters beginning with PL. 
  1. Example Playlist: https://youtube.com/playlist?list=PLD8AMy73ZVxU8hS9yA5dojIDN84zoUgZQ. 
  2.  Delete “https://youtube.com/playlist?list=“ from the ID.
  3. PLD8AMy73ZVxU8hS9yA5dojIDN84zoUgZQ is the correct code in this case to paste into Playlist ID text field.
Vimeo Album Showcase ID: 
  1. Example Showcase: https://vimeo.com/showcase/9127577
  2.      Delete ”https://vimeo.com/showcase/“ from the ID
  3.      9127577 is the correct code in this case to paste into the Playlist ID field
Youtube Feature Video ID
Vimeo Feature Video ID		Sourced from your YouTube or Vimeo videos. This selects which video is the large featured thumbnail on the left.

YouTube Feature Video ID:
  1. Example YouTube ID: https://youtu.be/gwPCZnhqaSQ
  2. Delete “https://youtu.be/“
  3. gwPCZnhqaSQ is the correct code in this case to paste into the Feature Video ID field
Vimeo Feature Video ID:
  1. Example Vimeo ID: https://vimeo.com/580833148
  2. Delete “https://vimeo.com/“
  3. 580833148 is the paste into the Feature Video ID field
Select Video (Media Library only)Clicking the Select button opens a dialog box allowing you to select a single video via the Media Library Application.
Note this is not generally recommended for video. The streaming power of YouTube or Vimeo allows for much faster playback.
Feature Video TitleText entry adds header title above the large featured video thumbnail to the left
Videos Title (Recent Video)Text entry area adds small header title above the list of small thumbnail videos to the right
Max Items DisplayedEnter number of playlist videos to include for video list to the right of the large featured video. 2-3 recommended.
Enable See More Videos ButtonCheckbox to toggle button on or off which will be visible below the widget. This button will automatically link to more videos on YouTube or Vimeo in the same playlist or showcase.
Text [Button]Enter text to be featured on each button. Typically shorter text is better for ease of reading and to keep the design tidy.
Style [Button]Select pre-built style options from the menu. Note that if two buttons are featured, each one may have its own style. Below is the list of styles that can be selected:
• Default - a rectangular shape with a solid-color fill
• Round - a pill shape with a solid-color fill
• Radius - a rectangle with slightly rounded corners with a solid-color fill
• Hollow - a rectangular outline shape with a transparent fill
• Expanded - an extra-wide rectangular shape with a solid-color fill
• Disabled - a rectangular shape faded back to denote that it is disabled
• Clear - a transparent button with only text visible
Color [Button]Select from your custom brand colors or grayscale options from the menu for button fills or outlines. Note that if two buttons are featured, each one may have its own color. Below is the list of colors that may be selected:
• Default 
• Primary Color 
• Primary Color – Light 
• Primary Color – Dark 
• Secondary Color 
• Secondary Color – Light 
• Secondary Color – Dark 
• Gradient 
• White 
• Light Gray 
• Medium Gray 
• Dark Gray 
• Black 
Target [Button]Below are the targets to choose from: 
Default – this will open in the same tab of the browser and is typically used to move around within your site
Blank – this will open in a new tab of the browser and is typically used for links that leave your site

Example

WYSIYWG and Editable Image

WYSIWYG and Editable Image

8/3/2022 7:37:40 PM

...

Adding Buttons

8/3/2022 7:36:10 PM

...

Adding News Feed and Article

8/3/2022 7:35:50 PM

- Creating a news feed - Adding a news article - Adding a news feed to a page ...